bkui-vue 2.0.1-beta.15.table.1 → 2.0.1-beta.15.table.11

package/lib/table/props.d.ts

@@ -46,6 +46,7 @@ export declare const fixedType: import("vue-types").VueTypeValidableDef<"left" |
 export type IOverflowTooltipOption = {
     content: ((col: Column, row: any) => string) | string;
     disabled?: ((col: Column, row: any) => boolean) | boolean;
+    allowHtml?: boolean;
     watchCellResize?: boolean;
     mode?: `${OverflowModeEnum}`;
     popoverOption?: any;
@@ -228,6 +229,11 @@ export declare enum IColSortBehavior {
      */
     interdependent = "interdependent"
 }
+export type FixedBottomOption = {
+    position: 'absolute' | 'relative';
+    height: number;
+    loading?: boolean;
+};
 export declare const tableProps: {
     /**
      * 渲染列表
@@ -272,7 +278,7 @@ export declare const tableProps: {
     };
     /**
      * 设置表格最小高度
-     * 默认：300
+     * 默认：LINE_HEIGHT * 4
      */
     minHeight: import("vue-types").VueTypeDef<StringNumber> & {
         default: StringNumber;
@@ -577,5 +583,11 @@ export declare const tableProps: {
     } & {
         default: boolean;
     };
+    /**
+     * 固定在底部的配置项
+     */
+    fixedBottom: import("vue-types").VueTypeDef<FixedBottomOption> & {
+        default: () => FixedBottomOption;
+    };
 };
 export {};

package/lib/table/table.css

@@ -1208,6 +1208,7 @@
   width: 100%;
   height: 100%;
   overflow: hidden;
+  border-spacing: 0;
 }
 .bk-table-flex {
   display: flex;
@@ -1218,15 +1219,21 @@
   flex: 1;
   overflow: auto;
 }
-.bk-table.has-scroll-y .bk-table-head {
-  padding-right: 4px;
-}
 .bk-table .bk-table-body {
   position: relative;
   overflow: hidden;
 }
 .bk-table .bk-table-body .prepend-row {
-  transform: translateX(var(--prepend-left));
+  transform: translate3d(var(--translate-x), 0, 0);
+}
+.bk-table .bk-table-body .resize-column {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 1px;
+  background-color: #3785ff;
+  transform: translate3d(var(--drag-offset-x), var(--translate-y), 0);
 }
 .bk-table .bk-table-body-content.bk-stripe table tbody tr:nth-child(even) td {
   background-color: #fafbfd;
@@ -1234,18 +1241,6 @@
 .bk-table .bk-table-body-content.bk-stripe table tbody tr td {
   border-bottom: none;
 }
-.bk-table .bk-fixed-bottom-border {
-  position: sticky;
-  bottom: 0;
-  left: 0;
-  z-index: 1;
-  width: 100%;
-  border-top: 1px solid var(--table-border-color);
-  transform: translateX(var(--scroll-head-left));
-}
-.bk-table .bk-fixed-bottom-border._is-empty {
-  display: none;
-}
 .bk-table .bk-table-head,
 .bk-table .bk-table-body {
   background: var(--table-bg-color);
@@ -1269,7 +1264,7 @@
 .bk-table .bk-table-head table,
 .bk-table .bk-table-body table {
   width: 100%;
-  border-collapse: collapse;
+  border-collapse: separate;
   transform: translateZ(0);
   table-layout: fixed;
   align-self: flex-start;
@@ -1360,18 +1355,6 @@
   position: sticky;
   z-index: 1;
 }
-.bk-table .bk-table-head table th.column_fixed.column_fixed_left,
-.bk-table .bk-table-body table th.column_fixed.column_fixed_left,
-.bk-table .bk-table-head table td.column_fixed.column_fixed_left,
-.bk-table .bk-table-body table td.column_fixed.column_fixed_left {
-  left: 0;
-}
-.bk-table .bk-table-head table th.column_fixed.column_fixed_right,
-.bk-table .bk-table-body table th.column_fixed.column_fixed_right,
-.bk-table .bk-table-head table td.column_fixed.column_fixed_right,
-.bk-table .bk-table-body table td.column_fixed.column_fixed_right {
-  right: 0;
-}
 .bk-table .bk-table-head table th.row_expend .expand-cell-ctx,
 .bk-table .bk-table-body table th.row_expend .expand-cell-ctx,
 .bk-table .bk-table-head table td.row_expend .expand-cell-ctx,
@@ -1444,14 +1427,14 @@
 }
 .bk-table .bk-table-head table thead th.column_fixed,
 .bk-table .bk-table-body table thead th.column_fixed {
-  transform: translateX(var(--scroll-left));
+  transform: translateX(var(--translate-x));
 }
 .bk-table .bk-table-head table tbody tr td,
 .bk-table .bk-table-body table tbody tr td {
   background-color: #fff;
-  border-top: 1px solid transparent;
-  border-bottom: 1px solid transparent;
-  border-right: 1px solid transparent;
+  border-top: 1px solid var(--table-bg-color);
+  border-bottom: 1px solid var(--table-bg-color);
+  border-right: 1px solid var(--table-bg-color);
   box-sizing: border-box;
 }
 .bk-table .bk-table-head table tbody tr td.empty-cell,
@@ -1473,7 +1456,7 @@
 .bk-table .bk-table-head table tbody tr:hover.hover-highlight td:not(.empty-cell),
 .bk-table .bk-table-body table tbody tr:hover.hover-highlight td:not(.empty-cell) {
   background: var(--table-row-hover-bg-color);
-  border-right: var(--table-row-hover-bg-color);
+  border-right-color: var(--table-row-hover-bg-color);
 }
 .bk-table .bk-table-head table tbody tr.--drag-start td,
 .bk-table .bk-table-body table tbody tr.--drag-start td {
@@ -1488,15 +1471,21 @@
 .bk-table .bk-table-head .col-resize-drag {
   position: absolute;
   top: 0;
-  right: 0;
+  left: 0;
   bottom: 0;
   z-index: 1;
   width: 6px;
   background-color: #3785ff;
-  transform: translateX(-50%);
+  transform: translate3d(var(--drag-offset-h-x), 0, 0);
+}
+.bk-table .bk-table-head .col-resize-drag:hover {
+  cursor: ew-resize !important;
+}
+.bk-table .bk-table-head .bk-table-fixed {
+  transform: translate3d(0, 0, 0);
 }
 .bk-table .bk-table-head thead {
-  transform: translateX(var(--scroll-head-left));
+  transform: translate3d(var(--translate-x-1), 0, 0);
 }
 .bk-table .bk-table-head .table-head-settings {
   position: absolute;
@@ -1554,7 +1543,7 @@
   border-bottom: 1px solid var(--table-border-color);
 }
 .bk-table.bordered-col th {
-  border-right: 1px solid var(--table-border-color);
+  border-right: 1px solid var(--background-color);
 }
 .bk-table.bordered-col th:last-child {
   border-right: none;
@@ -1562,17 +1551,14 @@
 .bk-table.bordered-col .bk-table-body tbody tr td {
   border-right-color: var(--table-border-color);
 }
-.bk-table.bordered-col .bk-table-body tbody tr td:last-child {
-  border-right-color: transparent;
-}
 .bk-table th,
 .bk-table td {
-  border-right: 1px solid transparent;
+  border-right: 1px solid var(--table-bg-color);
 }
 .bk-table.bordered-none th,
 .bk-table.bordered-none td {
   border-top: none;
-  border-right: 1px solid transparent;
+  border-right: 1px solid var(--table-bg-color);
   border-bottom: none;
   border-left: none;
 }
@@ -1583,12 +1569,13 @@
   bottom: 0;
   left: 0;
   pointer-events: none;
+  transform: translate3d(var(--translate-x), var(--translate-y), 0);
 }
-.bk-table .bk-table-fixed.shadow-left .column_fixed_left {
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.12);
+.bk-table .bk-table-fixed .column_fixed_right {
+  box-shadow: var(--shadow-right);
 }
-.bk-table .bk-table-fixed.shadow-right .column_fixed_right {
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.12);
+.bk-table .bk-table-fixed .column_fixed_left {
+  box-shadow: var(--shadow-left);
 }
 .bk-table .bk-table-fixed .column_fixed {
   position: absolute;
@@ -1609,6 +1596,7 @@
   right: 0;
   bottom: 0;
   left: 0;
+  text-align: center;
 }
 .bk-table colgroup col {
   background: var(--table-bg-color);

package/lib/table/table.d.ts

@@ -166,6 +166,9 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: boolean;
     };
+    fixedBottom: import("vue-types").VueTypeDef<import("./props").FixedBottomOption> & {
+        default: () => import("./props").FixedBottomOption;
+    };
 }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, (...args: any[]) => boolean>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     data: import("vue-types").VueTypeDef<any[]> & {
         default: () => any[];
@@ -334,6 +337,9 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: boolean;
     };
+    fixedBottom: import("vue-types").VueTypeDef<import("./props").FixedBottomOption> & {
+        default: () => import("./props").FixedBottomOption;
+    };
 }>>, {
     data: any[];
     thead: import("./props").Thead;
@@ -379,5 +385,6 @@ declare const _default: import("vue").DefineComponent<{
     isFlex: boolean;
     rowDraggable: any;
     shiftMultiChecked: boolean;
+    fixedBottom: import("./props").FixedBottomOption;
 }, {}>;
 export default _default;

package/lib/table/table.less

@@ -15,6 +15,7 @@
   width: 100%;
   height: 100%;
   overflow: hidden;
+  border-spacing: 0;
 
   &-flex {
     display: flex;
@@ -26,19 +27,22 @@
     }
   }
 
-  &.has-scroll-y {
-    .@{bk-prefix}-table-head {
-      padding-right: 4px;
-    }
-  }
-
   .@{bk-prefix}-table-body {
     position: relative;
     overflow: hidden;
-    // border-bottom: 1px solid @table-border-color;
 
     .prepend-row {
-      transform: translateX(var(--prepend-left));
+      transform: translate3d(var(--translate-x), 0, 0);
+    }
+
+    .resize-column {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      width: 1px;
+      background-color: #3785ff;
+      transform: translate3d(var(--drag-offset-x), var(--translate-y), 0);
     }
   }
 
@@ -62,20 +66,6 @@
     }
   }
 
-  .@{bk-prefix}-fixed-bottom-border {
-    position: sticky;
-    bottom: 0;
-    left: 0;
-    z-index: 1;
-    width: 100%;
-    border-top: 1px solid @table-border-color;
-    transform: translateX(var(--scroll-head-left));
-
-    &._is-empty {
-      display: none;
-    }
-  }
-
   .@{bk-prefix}-table-head,
   .@{bk-prefix}-table-body {
     background: @table-bg-color;
@@ -94,12 +84,12 @@
         height: 100%;
         padding-bottom: 20px;
       }
-
     }
 
     table {
       width: 100%;
-      border-collapse: collapse;
+      border-collapse: separate;
+
       transform: translateZ(0);
       table-layout: fixed;
       align-self: flex-start;
@@ -158,7 +148,6 @@
           }
         }
 
-
         .expand-btn-action {
           display: flex;
           padding: 0 16px;
@@ -169,14 +158,6 @@
         &.column_fixed {
           position: sticky;
           z-index: 1;
-
-          &.column_fixed_left {
-            left: 0;
-          }
-
-          &.column_fixed_right {
-            right: 0;
-          }
         }
 
         &.row_expend {
@@ -250,7 +231,7 @@
           }
 
           &.column_fixed {
-            transform: translateX(var(--scroll-left));
+            transform: translateX(var(--translate-x));
           }
         }
       }
@@ -259,9 +240,9 @@
         tr {
           td {
             background-color: #fff;
-            border-top: 1px solid transparent;
-            border-bottom: 1px solid transparent;
-            border-right: 1px solid transparent;
+            border-top: 1px solid @table-bg-color;
+            border-bottom: 1px solid @table-bg-color;
+            border-right: 1px solid @table-bg-color;
 
             box-sizing: border-box;
 
@@ -287,7 +268,7 @@
               td {
                 &:not(.empty-cell) {
                   background: @table-row-hover-bg-color;
-                  border-right: @table-row-hover-bg-color;
+                  border-right-color: @table-row-hover-bg-color;
                 }
               }
             }
@@ -295,7 +276,7 @@
 
           &.--drag-start {
             td {
-              background: #fff!important;
+              background: #fff !important;
             }
           }
         }
@@ -312,16 +293,23 @@
     .col-resize-drag {
       position: absolute;
       top: 0;
-      right: 0;
+      left: 0;
       bottom: 0;
       z-index: 1;
       width: 6px;
       background-color: #3785ff;
-      transform: translateX(-50%);
+      transform: translate3d(var(--drag-offset-h-x), 0, 0);
+      &:hover {
+        cursor: ew-resize !important;
+      }
+    }
+
+    .@{bk-prefix}-table-fixed {
+      transform: translate3d(0, 0, 0);
     }
 
     thead {
-      transform: translateX(var(--scroll-head-left));
+      transform: translate3d(var(--translate-x-1), 0, 0);
     }
 
     .table-head-settings {
@@ -385,7 +373,6 @@
     .@{bk-prefix}-table-footer {
       border-bottom: 1px solid @table-border-color;
     }
-
   }
 
   &.bordered-horizontal {
@@ -407,7 +394,7 @@
 
   &.bordered-col {
     th {
-      border-right: 1px solid @table-border-color;
+      border-right: 1px solid var(--background-color);
 
       &:last-child {
         border-right: none;
@@ -419,27 +406,22 @@
         tr {
           td {
             border-right-color: @table-border-color;
-
-            &:last-child {
-              border-right-color: transparent;
-            }
           }
         }
       }
     }
-
   }
 
   th,
   td {
-    border-right: 1px solid transparent;
+    border-right: 1px solid @table-bg-color;
   }
 
   &.bordered-none {
     th,
     td {
       border-top: none;
-      border-right: 1px solid transparent;
+      border-right: 1px solid @table-bg-color;
       border-bottom: none;
       border-left: none;
     }
@@ -452,17 +434,14 @@
     bottom: 0;
     left: 0;
     pointer-events: none;
+    transform: translate3d(var(--translate-x), var(--translate-y), 0);
 
-    &.shadow-left {
-      .column_fixed_left {
-        box-shadow: 0 0 10px rgb(0 0 0 / 12%);
-      }
+    .column_fixed_right {
+      box-shadow: var(--shadow-right);
     }
 
-    &.shadow-right {
-      .column_fixed_right {
-        box-shadow: 0 0 10px rgb(0 0 0 / 12%);
-      }
+    .column_fixed_left {
+      box-shadow: var(--shadow-left);
     }
 
     .column_fixed {
@@ -490,6 +469,7 @@
     right: 0;
     bottom: 0;
     left: 0;
+    text-align: center;
   }
   colgroup {
     col {
@@ -511,4 +491,4 @@
   .stripe-row {
     background: #fafbfd;
   }
-}
+}

package/lib/table/table.variable.css

@@ -1595,6 +1595,7 @@
   width: 100%;
   height: 100%;
   overflow: hidden;
+  border-spacing: 0;
 }
 .bk-table-flex {
   display: flex;
@@ -1605,15 +1606,21 @@
   flex: 1;
   overflow: auto;
 }
-.bk-table.has-scroll-y .bk-table-head {
-  padding-right: 4px;
-}
 .bk-table .bk-table-body {
   position: relative;
   overflow: hidden;
 }
 .bk-table .bk-table-body .prepend-row {
-  transform: translateX(var(--prepend-left));
+  transform: translate3d(var(--translate-x), 0, 0);
+}
+.bk-table .bk-table-body .resize-column {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 1px;
+  background-color: #3785ff;
+  transform: translate3d(var(--drag-offset-x), var(--translate-y), 0);
 }
 .bk-table .bk-table-body-content.bk-stripe table tbody tr:nth-child(even) td {
   background-color: #fafbfd;
@@ -1621,18 +1628,6 @@
 .bk-table .bk-table-body-content.bk-stripe table tbody tr td {
   border-bottom: none;
 }
-.bk-table .bk-fixed-bottom-border {
-  position: sticky;
-  bottom: 0;
-  left: 0;
-  z-index: 1;
-  width: 100%;
-  border-top: 1px solid var(--table-border-color);
-  transform: translateX(var(--scroll-head-left));
-}
-.bk-table .bk-fixed-bottom-border._is-empty {
-  display: none;
-}
 .bk-table .bk-table-head,
 .bk-table .bk-table-body {
   background: var(--table-bg-color);
@@ -1656,7 +1651,7 @@
 .bk-table .bk-table-head table,
 .bk-table .bk-table-body table {
   width: 100%;
-  border-collapse: collapse;
+  border-collapse: separate;
   transform: translateZ(0);
   table-layout: fixed;
   align-self: flex-start;
@@ -1747,18 +1742,6 @@
   position: sticky;
   z-index: 1;
 }
-.bk-table .bk-table-head table th.column_fixed.column_fixed_left,
-.bk-table .bk-table-body table th.column_fixed.column_fixed_left,
-.bk-table .bk-table-head table td.column_fixed.column_fixed_left,
-.bk-table .bk-table-body table td.column_fixed.column_fixed_left {
-  left: 0;
-}
-.bk-table .bk-table-head table th.column_fixed.column_fixed_right,
-.bk-table .bk-table-body table th.column_fixed.column_fixed_right,
-.bk-table .bk-table-head table td.column_fixed.column_fixed_right,
-.bk-table .bk-table-body table td.column_fixed.column_fixed_right {
-  right: 0;
-}
 .bk-table .bk-table-head table th.row_expend .expand-cell-ctx,
 .bk-table .bk-table-body table th.row_expend .expand-cell-ctx,
 .bk-table .bk-table-head table td.row_expend .expand-cell-ctx,
@@ -1831,14 +1814,14 @@
 }
 .bk-table .bk-table-head table thead th.column_fixed,
 .bk-table .bk-table-body table thead th.column_fixed {
-  transform: translateX(var(--scroll-left));
+  transform: translateX(var(--translate-x));
 }
 .bk-table .bk-table-head table tbody tr td,
 .bk-table .bk-table-body table tbody tr td {
   background-color: #fff;
-  border-top: 1px solid transparent;
-  border-bottom: 1px solid transparent;
-  border-right: 1px solid transparent;
+  border-top: 1px solid var(--table-bg-color);
+  border-bottom: 1px solid var(--table-bg-color);
+  border-right: 1px solid var(--table-bg-color);
   box-sizing: border-box;
 }
 .bk-table .bk-table-head table tbody tr td.empty-cell,
@@ -1860,7 +1843,7 @@
 .bk-table .bk-table-head table tbody tr:hover.hover-highlight td:not(.empty-cell),
 .bk-table .bk-table-body table tbody tr:hover.hover-highlight td:not(.empty-cell) {
   background: var(--table-row-hover-bg-color);
-  border-right: var(--table-row-hover-bg-color);
+  border-right-color: var(--table-row-hover-bg-color);
 }
 .bk-table .bk-table-head table tbody tr.--drag-start td,
 .bk-table .bk-table-body table tbody tr.--drag-start td {
@@ -1875,15 +1858,21 @@
 .bk-table .bk-table-head .col-resize-drag {
   position: absolute;
   top: 0;
-  right: 0;
+  left: 0;
   bottom: 0;
   z-index: 1;
   width: 6px;
   background-color: #3785ff;
-  transform: translateX(-50%);
+  transform: translate3d(var(--drag-offset-h-x), 0, 0);
+}
+.bk-table .bk-table-head .col-resize-drag:hover {
+  cursor: ew-resize !important;
+}
+.bk-table .bk-table-head .bk-table-fixed {
+  transform: translate3d(0, 0, 0);
 }
 .bk-table .bk-table-head thead {
-  transform: translateX(var(--scroll-head-left));
+  transform: translate3d(var(--translate-x-1), 0, 0);
 }
 .bk-table .bk-table-head .table-head-settings {
   position: absolute;
@@ -1941,7 +1930,7 @@
   border-bottom: 1px solid var(--table-border-color);
 }
 .bk-table.bordered-col th {
-  border-right: 1px solid var(--table-border-color);
+  border-right: 1px solid var(--background-color);
 }
 .bk-table.bordered-col th:last-child {
   border-right: none;
@@ -1949,17 +1938,14 @@
 .bk-table.bordered-col .bk-table-body tbody tr td {
   border-right-color: var(--table-border-color);
 }
-.bk-table.bordered-col .bk-table-body tbody tr td:last-child {
-  border-right-color: transparent;
-}
 .bk-table th,
 .bk-table td {
-  border-right: 1px solid transparent;
+  border-right: 1px solid var(--table-bg-color);
 }
 .bk-table.bordered-none th,
 .bk-table.bordered-none td {
   border-top: none;
-  border-right: 1px solid transparent;
+  border-right: 1px solid var(--table-bg-color);
   border-bottom: none;
   border-left: none;
 }
@@ -1970,12 +1956,13 @@
   bottom: 0;
   left: 0;
   pointer-events: none;
+  transform: translate3d(var(--translate-x), var(--translate-y), 0);
 }
-.bk-table .bk-table-fixed.shadow-left .column_fixed_left {
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.12);
+.bk-table .bk-table-fixed .column_fixed_right {
+  box-shadow: var(--shadow-right);
 }
-.bk-table .bk-table-fixed.shadow-right .column_fixed_right {
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.12);
+.bk-table .bk-table-fixed .column_fixed_left {
+  box-shadow: var(--shadow-left);
 }
 .bk-table .bk-table-fixed .column_fixed {
   position: absolute;
@@ -1996,6 +1983,7 @@
   right: 0;
   bottom: 0;
   left: 0;
+  text-align: center;
 }
 .bk-table colgroup col {
   background: var(--table-bg-color);

package/lib/table/utils.d.ts

@@ -136,11 +136,6 @@ export declare const resolveColumnSortProp: (col: Column, props: TablePropTypes)
 };
 export declare const resolveColumnFilterProp: (col: Column) => {
     enabled: boolean;
-    /**
-     * 格式化Border配置为标准Class
-     * @param val
-     * @returns
-     */
     list: any[];
     filterFn?: Function;
     match?: import("./props").FullEnum;
@@ -155,3 +150,10 @@ export declare const resolveColumnFilterProp: (col: Column) => {
     checked: any[];
 };
 export declare const getRawData: (data: any) => any;
+/**
+ * 转换 px | % 为实际数值
+ * @param val
+ * @param parentVal
+ * @returns
+ */
+export declare const getNumberOrPercentValue: (val: string | number, parentVal?: number) => number;