bkui-vue 0.0.1-beta.21 → 0.0.1-beta.22

package/dist/bkui-vue.umd.js

@@ -6004,7 +6004,8 @@ ${$(r2)}`), n2;
     showHead: PropTypes.bool.def(true),
     virtualEnabled: PropTypes.bool.def(false),
     border: PropTypes.arrayOf(PropTypes.commonType(BORDER_OPRIONS, "border")).def(["row"]),
-    pagination: PropTypes.oneOfType([PropTypes.bool.def(false), PropTypes.object.def({})]).def(false)
+    pagination: PropTypes.oneOfType([PropTypes.bool.def(false), PropTypes.object.def({})]).def(false),
+    remotePagination: PropTypes.bool.def(false)
   }, EventProps$1);
   const resolvePropVal = (prop, key, args) => {
     if (Object.prototype.hasOwnProperty.call(prop, key)) {
@@ -6127,7 +6128,13 @@ ${$(r2)}`), n2;
   const resolvePaginationOption = (propPagination, defVal) => {
     if (!!propPagination) {
       if (typeof propPagination === "object") {
-        return __spreadValues(__spreadValues({}, propPagination), defVal);
+        let current = Object.prototype.hasOwnProperty.call(propPagination, "current") ? propPagination.current : propPagination.value;
+        if (!/\d+/.test(current)) {
+          current = 1;
+        }
+        return __spreadProps(__spreadValues(__spreadValues({}, defVal), propPagination), {
+          current
+        });
       }
       return defVal;
     }
@@ -6607,7 +6614,24 @@ ${$(r2)}`), n2;
       }, [this.renderColGroup(), this.renderTBody(rows)]);
     }
     renderTableFooter(options) {
-      return vue.createVNode(BkPagination, options, null);
+      return vue.createVNode(BkPagination, vue.mergeProps(options, {
+        "modelValue": options.current,
+        "onLimitChange": (limit) => this.handlePageLimitChange(limit),
+        "onChange": (current) => this.hanlePageChange(current)
+      }), null);
+    }
+    handlePageLimitChange(limit) {
+      Object.assign(this.props.pagination, {
+        limit
+      });
+      this.context.emit("page-limit-change", limit);
+    }
+    hanlePageChange(current) {
+      Object.assign(this.props.pagination, {
+        current,
+        value: current
+      });
+      this.context.emit("page-value-change", current);
     }
     setColumnActive(index, single = false) {
       const col = this.propActiveCols.find((item) => item.index === index);
@@ -6947,11 +6971,24 @@ ${$(r2)}`), n2;
       const colgroups = vue.reactive(props.columns.map((col) => __spreadProps(__spreadValues({}, col), {
         calcWidth: null
       })));
+      const startIndex = vue.ref(0);
+      const endIndex = vue.ref(0);
       let pagination2 = vue.reactive({
         count: 0,
         limit: 10,
         current: 1
       });
+      pagination2 = resolvePaginationOption(props.pagination, pagination2);
+      const resetStartEndIndex = () => {
+        if (!props.pagination || props.remotePagination) {
+          startIndex.value = 0;
+          endIndex.value = props.data.length;
+          return;
+        }
+        startIndex.value = (pagination2.current - 1) * pagination2.limit;
+        endIndex.value = pagination2.current * pagination2.limit;
+      };
+      resetStartEndIndex();
       let observerIns = null;
       const root = vue.ref();
       const getActiveColumns = () => (props.columns || []).map((_column, index) => ({
@@ -6963,21 +7000,6 @@ ${$(r2)}`), n2;
         activeColumns: getActiveColumns(),
         scrollTranslateY: 0
       });
-      const wrapperStyle = vue.computed(() => ({
-        minHeight: resolveNumberOrStringToPix(props.minHeight, "auto")
-      }));
-      const contentStyle = vue.computed(() => {
-        const resolveHeight = resolveNumberOrStringToPix(props.height);
-        const resolveHeadHeight = props.showHead ? resolveNumberOrStringToPix(props.headHeight) : "0";
-        const isAutoHeight = !isPercentPixOrNumber(props.height);
-        return __spreadValues({
-          display: "block"
-        }, isAutoHeight ? {
-          maxHeight: `calc(${resolveHeight} - ${resolveHeadHeight} - 2px)`
-        } : {
-          height: `calc(${resolveHeight} - ${resolveHeadHeight} - 2px)`
-        });
-      });
       vue.watch(() => [props.activeColumn, props.columns, props.pagination], () => {
         vue.nextTick(() => {
           reactiveProp.activeColumns = getActiveColumns();
@@ -6988,11 +7010,38 @@ ${$(r2)}`), n2;
             });
           });
           pagination2 = resolvePaginationOption(props.pagination, pagination2);
+          resetStartEndIndex();
         });
       }, {
         deep: true
       });
       const tableRender = new TableRender(props, ctx, reactiveProp, colgroups);
+      const wrapperStyle = vue.computed(() => ({
+        minHeight: resolveNumberOrStringToPix(props.minHeight, "auto")
+      }));
+      const pageData = vue.computed(() => props.data.slice(startIndex.value, endIndex.value));
+      const localPagination = vue.computed(() => {
+        if (!props.pagination) {
+          return null;
+        }
+        return props.remotePagination ? pagination2 : __spreadProps(__spreadValues({}, pagination2), {
+          count: props.data.length
+        });
+      });
+      const contentStyle = vue.computed(() => {
+        const resolveHeight = resolveNumberOrStringToPix(props.height);
+        const resolveHeadHeight = props.showHead ? resolveNumberOrStringToPix(props.headHeight) : "0";
+        const isAutoHeight = !isPercentPixOrNumber(props.height);
+        const resolveFooterHeight = props.pagination ? 40 : 0;
+        const contentHeight = `calc(${resolveHeight} - ${resolveHeadHeight} - ${resolveFooterHeight}px - 2px)`;
+        return __spreadValues({
+          display: "block"
+        }, isAutoHeight ? {
+          maxHeight: contentHeight
+        } : {
+          height: contentHeight
+        });
+      });
       const tableClass = vue.computed(() => classes({
         [resolveClassName("table")]: true
       }, resolvePropBorderToClassStr(props.border)));
@@ -7030,9 +7079,9 @@ ${$(r2)}`), n2;
         "class": headClass
       }, [props.showHead && tableRender.renderTableHeadSchema()]), vue.createVNode(BkVirtualRender, {
         "lineHeight": props.rowHeight,
-        "contentClassName": contentClass,
+        "class": contentClass,
         "style": contentStyle.value,
-        "list": props.data,
+        "list": pageData.value,
         "onContentScroll": handleScrollChanged,
         "throttleDelay": 0,
         "enabled": props.virtualEnabled
@@ -7043,7 +7092,7 @@ ${$(r2)}`), n2;
         }, null)
       }), vue.createVNode("div", {
         "class": footerClass
-      }, [props.pagination && tableRender.renderTableFooter(pagination2)])]);
+      }, [props.pagination && tableRender.renderTableFooter(localPagination.value)])]);
     }
   });
   const BkTable = withInstall(Component$4);
@@ -12752,6 +12801,7 @@ ${$(r2)}`), n2;
               __isRoot: parent === null,
               __order: order2,
               __isOpen: isOpen,
+              __checked: false,
               [children]: null
             };
             Object.assign(item, { __uuid: uuid2 });
@@ -12810,15 +12860,14 @@ ${$(r2)}`), n2;
       "--level-line": levelLine,
       "--lineHeight": `${props.lineHeight}px`,
       "--indent": `${props.indent}px`,
-      padding: 0
+      "--offset-left": `${props.offsetLeft}px`
     };
   };
   const getNodeItemStyle = (item, props, flatData = {}) => {
     const { schema } = flatData;
     const depth = getNodeAttr(schema, item.__uuid, "__depth");
     return __spreadValues({
-      "--depth": depth,
-      paddingLeft: 0
+      "--depth": depth
     }, typeof props.levelLine === "function" ? {
       "--level-line": getPropsOneOfBoolValueWithDefault(props, "levelLine", item, DEFAULT_LEVLE_LINE, null, [
         "node"
@@ -12835,6 +12884,13 @@ ${$(r2)}`), n2;
       "level-line": props.levelLine
     };
   };
+  const getNodeRowClass = (item, schema) => {
+    const { __checked } = getSchemaVal(schema, item.__uuid) || {};
+    return {
+      "is-checked": __checked,
+      "bk-node-row": true
+    };
+  };
   const updateTreeNode = (path, treeData, childKey, nodekey, nodeValue) => {
     assignTreeNode(path, treeData, childKey, { [nodekey]: nodeValue });
   };
@@ -12866,20 +12922,21 @@ ${$(r2)}`), n2;
     async: PropTypes.shape({
       callback: PropTypes.func.def(null),
       cache: PropTypes.bool.def(true)
-    })
+    }),
+    offsetLeft: PropTypes.number.def(15)
   };
   var Component = vue.defineComponent({
     name: "Tree",
     props: treeProps,
-    setup(props) {
+    setup(props, ctx) {
       const formatData = getFlatdata(props);
+      const checkedNodes = [];
       const flatData = vue.reactive({
         data: formatData[0],
         schema: formatData[1],
         levelLineSchema: {}
       });
       vue.watch(() => [props.data], (newData) => {
-        console.log("props.data changed");
         const formatData2 = getFlatdata(props, newData, schemaValues.value);
         flatData.data = formatData2[0];
         flatData.schema = formatData2[1];
@@ -12920,6 +12977,9 @@ ${$(r2)}`), n2;
           return val;
         }
         if (typeof val === "object" && val !== null) {
+          if (val.__v_isVNode) {
+            return val;
+          }
           const {
             node,
             className,
@@ -12957,7 +13017,7 @@ ${$(r2)}`), n2;
           }
         }
         if (prefixFnVal === "default" || typeof props.prefixIcon === "boolean" && props.prefixIcon) {
-          return isRootNode(item) ? getRootIcon(item) : vue.createVNode(textFile, {
+          return isRootNode(item) || hasChildNode(item) ? getRootIcon(item) : vue.createVNode(textFile, {
             "class": "bk-tree-icon"
           }, null);
         }
@@ -13004,6 +13064,23 @@ ${$(r2)}`), n2;
           setNodeOpened(item);
         }
       };
+      const handleNodeActionClick = (node) => {
+        hanldeTreeNodeClick(node);
+      };
+      const handleNodeContentClick = (item) => {
+        if (!checkedNodes.includes(item.__uuid)) {
+          checkedNodes.forEach((__uuid) => setNodeAttr({
+            __uuid
+          }, "__checked", false));
+          checkedNodes.length = 0;
+          setNodeAttr(item, "__checked", true);
+          checkedNodes.push(item.__uuid);
+          if (!isNodeOpened(item)) {
+            hanldeTreeNodeClick(item);
+          }
+          ctx.emit("check", item, getSchemaVal2(item.__uuid));
+        }
+      };
       const checkNodeIsOpen = (node) => isRootNode(node) || isItemOpen(node) || isItemOpen(getNodeAttr2(node, "__parentId"));
       const filterNextNode = (depth, node) => {
         if (isRootNode(node)) {
@@ -13038,6 +13115,8 @@ ${$(r2)}`), n2;
         renderData,
         flatData,
         hanldeTreeNodeClick,
+        handleNodeContentClick,
+        handleNodeActionClick,
         getActionIcon,
         getRootIcon,
         getVirtualLines,
@@ -13048,10 +13127,17 @@ ${$(r2)}`), n2;
     render() {
       const props = this.$props;
       const renderTreeNode = (item) => vue.createVNode("div", {
+        "class": getNodeRowClass(item, this.flatData.schema)
+      }, [vue.createVNode("div", {
         "class": getNodeItemClass(item, this.flatData.schema, props),
-        "style": getNodeItemStyle(item, props, this.flatData),
-        "onClick": () => this.hanldeTreeNodeClick(item)
-      }, [[this.getActionIcon(item), this.getNodePrefixIcon(item), this.getLoadingIcon(item)], vue.createVNode("span", null, [getLabel(item, props)]), this.getVirtualLines(item)]);
+        "style": getNodeItemStyle(item, props, this.flatData)
+      }, [vue.createVNode("span", {
+        "class": "node-action",
+        "onClick": () => this.handleNodeActionClick(item)
+      }, [this.getActionIcon(item)]), vue.createVNode("span", {
+        "class": "node-content",
+        "onClick": () => this.handleNodeContentClick(item)
+      }, [[this.getNodePrefixIcon(item), this.getLoadingIcon(item)], vue.createVNode("span", null, [getLabel(item, props)])]), this.getVirtualLines(item)])]);
       return vue.createVNode(BkVirtualRender, {
         "class": "bk-tree",
         "style": getTreeStyle(null, props),

package/dist/style.css

@@ -2537,10 +2537,14 @@ optgroup {
   }
 }
 .bk-table {
-  overflow: auto;
+  overflow: hidden;
+  height: 100%;
   border-top: 1px solid #dcdee5;
   border-bottom: 1px solid #dcdee5;
 }
+.bk-table .bk-table-body {
+  overflow: auto;
+}
 .bk-table .bk-table-head,
 .bk-table .bk-table-body {
   background: white;
@@ -2587,6 +2591,9 @@ optgroup {
 .bk-table .bk-table-body table tbody tr:hover td {
   background: #f5f7fa;
 }
+.bk-table .bk-table-footer {
+  line-height: 40px;
+}
 .bk-table.bordered-row .cell {
   border-bottom: 1px solid #dcdee5;
 }
@@ -3139,6 +3146,12 @@ optgroup {
   display: inline-block;
   padding-left: 23px;
 }
+.bk-tree .bk-node-row {
+  padding-left: calc(var(--offset-left));
+}
+.bk-tree .bk-node-row.is-checked {
+  background-color: #EBF2FF;
+}
 .bk-tree .bk-tree-node {
   position: relative;
   height: var(--lineHeight);
@@ -3172,6 +3185,9 @@ optgroup {
 .bk-tree .bk-tree-node .bk-tree-icon {
   margin: 0 6px 0 4px;
 }
+.bk-tree .bk-tree-node .node-content {
+  display: inline-block;
+}
 .bk-slider {
   display: flex;
   flex-direction: row;

package/lib/table/index.d.ts

@@ -15,6 +15,7 @@ declare const BkTable: {
             pagination: boolean | {
                 [key: string]: any;
             };
+            remotePagination: boolean;
         }> & Omit<Readonly<import("vue").ExtractPropTypes<{
             onRowClick: FunctionConstructor;
             data: import("vue-types").VueTypeDef<any[]> & {
@@ -59,7 +60,12 @@ declare const BkTable: {
                     [key: string]: any;
                 });
             };
-        }>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "data" | "height" | "minHeight" | "border" | "headHeight" | "columnPick" | "rowHeight" | "showHead" | "virtualEnabled" | "pagination">;
+            remotePagination: import("vue-types").VueTypeValidableDef<boolean> & {
+                default: boolean;
+            } & {
+                default: boolean;
+            };
+        }>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "data" | "height" | "minHeight" | "border" | "headHeight" | "columnPick" | "rowHeight" | "showHead" | "virtualEnabled" | "pagination" | "remotePagination">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -117,6 +123,11 @@ declare const BkTable: {
                     [key: string]: any;
                 });
             };
+            remotePagination: import("vue-types").VueTypeValidableDef<boolean> & {
+                default: boolean;
+            } & {
+                default: boolean;
+            };
         }>>, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, {
             data: any[];
             height: string | number;
@@ -130,6 +141,7 @@ declare const BkTable: {
             pagination: boolean | {
                 [key: string]: any;
             };
+            remotePagination: boolean;
         }> & {
             beforeCreate?: (() => void) | (() => void)[];
             created?: (() => void) | (() => void)[];
@@ -194,6 +206,11 @@ declare const BkTable: {
                 [key: string]: any;
             });
         };
+        remotePagination: import("vue-types").VueTypeValidableDef<boolean> & {
+            default: boolean;
+        } & {
+            default: boolean;
+        };
     }>> & import("vue").ShallowUnwrapRef<() => JSX.Element> & {} & {} & import("vue").ComponentCustomProperties;
     __isFragment?: never;
     __isTeleport?: never;
@@ -242,6 +259,11 @@ declare const BkTable: {
             [key: string]: any;
         });
     };
+    remotePagination: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
 }>>, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, {
     data: any[];
     height: string | number;
@@ -255,5 +277,6 @@ declare const BkTable: {
     pagination: boolean | {
         [key: string]: any;
     };
+    remotePagination: boolean;
 }> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("@vue/runtime-core").Plugin;
 export default BkTable;

package/lib/table/index.js

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue"),require("../shared"),require("../pagination"),require("../virtual-render")):"function"==typeof define&&define.amd?define(["exports","vue","../shared","../pagination","../virtual-render"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).bkuiVue={},e.Vue,e.Shared,e.Pagination,e["@bkui-vue/virtual-render"])}(this,(function(e,t,r,o,n){"use strict";function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=i(o),s=i(n);function c(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var u={exports:{}};!function(e){e.exports=function(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e},e.exports.__esModule=!0,e.exports.default=e.exports}(u);var l=c(u.exports),p=["none","row","col","outer"],d={onRowClick:Function},f=Object.assign({data:r.PropTypes.arrayOf(r.PropTypes.any).def([]),columns:r.PropTypes.arrayOf(r.PropTypes.shape({label:r.PropTypes.oneOfType([r.PropTypes.func.def((function(){return""})),r.PropTypes.string.def("")]),field:r.PropTypes.oneOfType([r.PropTypes.func.def((function(){return""})),r.PropTypes.string.def("")]),render:r.PropTypes.oneOfType([r.PropTypes.func.def((function(){return""})),r.PropTypes.string.def("")]),width:r.PropTypes.oneOfType([r.PropTypes.number.def(void 0),r.PropTypes.string.def("auto")])})),activeColumn:r.PropTypes.oneOfType([r.PropTypes.number.def(-1),r.PropTypes.arrayOf(r.PropTypes.number.def(-1))]),columnPick:r.PropTypes.commonType(["multi","single","disabled"],"columnPick").def("disabled"),height:r.PropTypes.oneOfType([r.PropTypes.number,r.PropTypes.string]).def("auto"),minHeight:r.PropTypes.oneOfType([r.PropTypes.number,r.PropTypes.string]).def("auto"),rowHeight:r.PropTypes.oneOfType([r.PropTypes.number,r.PropTypes.func]).def(40),headHeight:r.PropTypes.number.def(40),showHead:r.PropTypes.bool.def(!0),virtualEnabled:r.PropTypes.bool.def(!1),border:r.PropTypes.arrayOf(r.PropTypes.commonType(p,"border")).def(["row"]),pagination:r.PropTypes.oneOfType([r.PropTypes.bool.def(!1),r.PropTypes.object.def({})]).def(!1)},d),y={exports:{}};!function(e){e.exports=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},e.exports.__esModule=!0,e.exports.default=e.exports}(y);var v=c(y.exports),h={exports:{}};!function(e){function t(e,t){for(var r=0;r<t.length;r++){var o=t[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}e.exports=function(e,r,o){return r&&t(e.prototype,r),o&&t(e,o),Object.defineProperty(e,"prototype",{writable:!1}),e},e.exports.__esModule=!0,e.exports.default=e.exports}(h);var m=c(h.exports),b={exports:{}};!function(e){function t(r){return e.exports=t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},e.exports.__esModule=!0,e.exports.default=e.exports,t(r)}e.exports=t,e.exports.__esModule=!0,e.exports.default=e.exports}(b);var x=c(b.exports),g={exports:{}},T={exports:{}},P={exports:{}};!function(e){e.exports=function(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,o=new Array(t);r<t;r++)o[r]=e[r];return o},e.exports.__esModule=!0,e.exports.default=e.exports}(P),function(e){var t=P.exports;e.exports=function(e){if(Array.isArray(e))return t(e)},e.exports.__esModule=!0,e.exports.default=e.exports}(T);var C={exports:{}};!function(e){e.exports=function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)},e.exports.__esModule=!0,e.exports.default=e.exports}(C);var w={exports:{}};!function(e){var t=P.exports;e.exports=function(e,r){if(e){if("string"==typeof e)return t(e,r);var o=Object.prototype.toString.call(e).slice(8,-1);return"Object"===o&&e.constructor&&(o=e.constructor.name),"Map"===o||"Set"===o?Array.from(e):"Arguments"===o||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(o)?t(e,r):void 0}},e.exports.__esModule=!0,e.exports.default=e.exports}(w);var O={exports:{}};!function(e){e.exports=function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")},e.exports.__esModule=!0,e.exports.default=e.exports}(O),function(e){var t=T.exports,r=C.exports,o=w.exports,n=O.exports;e.exports=function(e){return t(e)||r(e)||o(e)||n()},e.exports.__esModule=!0,e.exports.default=e.exports}(g);var k=c(g.exports),_=void 0,N=function(e,t,r){var o;if(Object.prototype.hasOwnProperty.call(e,t))return"function"==typeof e[t]?(o=e[t]).call.apply(o,[_].concat(k(r))):e[t]},j=function(e){return"disabled"!==e.columnPick?"multi"===e.columnPick?Array.isArray(e.activeColumn)?e.activeColumn:A(e.activeColumn):Array.isArray(e.activeColumn)?A(e.activeColumn[0]):A(e.activeColumn):[]},A=function(e){return/^\d+$/.test("".concat(e))?[parseInt("".concat(e),10)]:[]},H=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"100%",r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,o="";return o=/^auto|null|undefined$/gi.test("".concat(e))?t:/^\d+\.?\d+$/.test("".concat(e))?"".concat(e,"px"):e,r&&(o="calc(".concat(o," - ").concat(r,")")),o},V=m((function e(t,r){v(this,e),this.props=null,this.ctx=null,this.props=t,this.ctx=r})),S=function(){function e(t,r,o,n){v(this,e),this.props=t,this.context=r,this.reactiveProp=o,this.colgroups=n,this.plugins=new V(t,r)}return m(e,[{key:"propActiveCols",get:function(){return this.reactiveProp.activeColumns}},{key:"renderTableHeadSchema",value:function(){return t.createVNode("table",{cellpadding:0,cellspacing:0},[this.renderColGroup(),this.renderHeader()])}},{key:"renderTableBodySchema",value:function(e){return t.createVNode("table",{cellpadding:0,cellspacing:0},[this.renderColGroup(),this.renderTBody(e)])}},{key:"renderTableFooter",value:function(e){return t.createVNode(a.default,e,null)}},{key:"setColumnActive",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],r=this.propActiveCols.find((function(t){return t.index===e}));Object.assign(r,{active:!r.active}),t&&this.propActiveCols.filter((function(t){return t.index!==e&&t.active})).forEach((function(e){Object.assign(e,{active:!1})}))}},{key:"handleColumnHeadClick",value:function(e){"disabled"!==this.props.columnPick&&(this.setColumnActive(e,"single"===this.props.columnPick),this.context.emit("column-pick",this.propActiveCols))}},{key:"renderHeader",value:function(){var e=this,o={"--row-height":"".concat(N(this.props,"headHeight",["thead"]),"px")};return t.createVNode("thead",{style:o},[t.createVNode("tr",null,[this.props.columns.map((function(o,n){return t.createVNode("th",{colspan:1,rowspan:1,class:r.classes({active:e.isColActive(n)}),onClick:function(){return e.handleColumnHeadClick(n)}},[t.createVNode("div",{class:"cell"},[N(o,"label",[o])])])}))])])}},{key:"renderTBody",value:function(e){var r=this;return t.createVNode("tbody",null,[e.map((function(o,n){var i={"--row-height":"".concat(N(r.props,"rowHeight",["tbody",o,n]),"px")};return t.createVNode("tr",{style:i,onClick:function(t){return r.handleRowClick(t,o,n,e)}},[r.props.columns.map((function(i){return t.createVNode("td",{colspan:1,rowspan:1},[t.createVNode("div",{class:"cell"},[r.renderCell(o,i,n,e)])])}))])}))])}},{key:"handleRowClick",value:function(e,t,r,o){this.context.emit("row-click",e,t,r,o,this)}},{key:"renderCell",value:function(e,t,r,o){var n=e[N(t,"field",[t,e])];return"function"==typeof t.render?t.render(n,e,r,o):n}},{key:"isColActive",value:function(e){return"disabled"!==this.props.columnPick&&this.propActiveCols.some((function(t){return t.index===e&&t.active}))}},{key:"renderColGroup",value:function(){var e=this;return t.createVNode("colgroup",null,[(this.colgroups||[]).map((function(o,n){var i,a=r.classes({active:e.isColActive(n)}),s={width:(i=o.calcWidth,H(i,"auto"))};return t.createVNode("col",{class:a,style:s},null)}))])}}]),e}(),M=t.defineComponent({name:"Table",props:f,setup:function(e,o){var n=t.reactive(j(e)),i=t.reactive(e.columns.map((function(e){return Object.assign(Object.assign({},e),{calcWidth:null})}))),a=t.reactive({count:0,limit:10,current:1}),c=null,u=t.ref(),d=function(){return(e.columns||[]).map((function(e,t){return{index:t,active:n.some((function(e){return e===t})),_column:e}}))},f=t.reactive({activeColumns:d(),scrollTranslateY:0}),y=t.computed((function(){return{minHeight:H(e.minHeight,"auto")}})),v=t.computed((function(){var t,r=H(e.height),o=e.showHead?H(e.headHeight):"0",n=(t=e.height,!/^\d+\.?\d*(px|%)?$/.test("".concat(t)));return Object.assign({display:"block"},n?{maxHeight:"calc(".concat(r," - ").concat(o," - 2px)")}:{height:"calc(".concat(r," - ").concat(o," - 2px)")})}));t.watch((function(){return[e.activeColumn,e.columns,e.pagination]}),(function(){t.nextTick((function(){f.activeColumns=d();var t,r,o=j(e);f.activeColumns.forEach((function(e,t){Object.assign(e,{active:o.some((function(e){return e===t}))})})),t=e.pagination,r=a,a=t?"object"===x(t)?Object.assign(Object.assign({},t),r):r:{}}))}),{deep:!0});var h=new S(e,o,f,i),m=t.computed((function(){return r.classes(l({},r.resolveClassName("table"),!0),(t=e.border,o=["row"],"string"==typeof t&&o.push(t),Array.isArray(t)&&o.push.apply(o,k(t.filter((function(e){return p.includes(e)})))),k(new Set(o)).map((function(e){return"bordered-".concat(e)})).join(" ")));var t,o})),b=r.classes(l({},r.resolveClassName("table-head"),!0)),g=r.classes(l({},r.resolveClassName("table-body"),!0)),T=r.classes(l({},r.resolveClassName("table-footer"),!0)),P=function(e){var t=e[1];f.scrollTranslateY=t.translateY};return t.onMounted((function(){c=function(e,t){var o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:60,n=arguments.length>3&&void 0!==arguments[3]&&arguments[3],i=r.throttle((function(){"function"==typeof t&&t()}),o),a=new ResizeObserver((function(){i()}));return n&&"function"==typeof t&&t(),{start:function(){a.observe(e)},stop:function(){a.disconnect(),a.unobserve(e)}}}(u.value,(function(){!function(e,t){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:20,o=(e.getBoundingClientRect()||{}).width,n=[],i=function(e,t){var r=!(arguments.length>2&&void 0!==arguments[2])||arguments[2];Object.assign(e,{calcWidth:t}),r&&(o-=t)<0&&(o=0)};if(t.forEach((function(e,t){var a=String(e.width),s=!0;if(/^\d+\.?\d*(px)?$/.test(a)){var c=Number(a.replace("px",""));i(e,c),s=!1}if(/^\d+\.?\d*%$/.test(a)){var u=r;if(o>0){var l=Number(a.replace("%",""));u=o*l/100}i(e,u),s=!1}s&&n.push(t)})),n.length>0){var a=r;o>0&&(a=o/n.length,n.forEach((function(e){return i(t[e],a,!1)})))}}(u.value,i,20)}),60,!0),c.start()})),t.onBeforeUnmount((function(){c.stop(),c=null})),o.expose({plugins:h.plugins}),function(){return t.createVNode("div",{class:m.value,style:y.value,ref:u},[t.createVNode("div",{class:b},[e.showHead&&h.renderTableHeadSchema()]),t.createVNode(s.default,{lineHeight:e.rowHeight,contentClassName:g,style:v.value,list:e.data,onContentScroll:P,throttleDelay:0,enabled:e.virtualEnabled},{default:function(t){return h.renderTableBodySchema(t.data||e.data)},afterContent:function(){return t.createVNode("div",{class:r.resolveClassName("table-fixed")},null)}}),t.createVNode("div",{class:T},[e.pagination&&h.renderTableFooter(a)])])}}}),E=r.withInstall(M);e.default=E,Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue"),require("../shared"),require("../pagination"),require("../virtual-render")):"function"==typeof define&&define.amd?define(["exports","vue","../shared","../pagination","../virtual-render"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).bkuiVue={},e.Vue,e.Shared,e.Pagination,e["@bkui-vue/virtual-render"])}(this,(function(e,t,n,r,o){"use strict";function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=a(r),s=a(o);function u(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var c={exports:{}};!function(e){e.exports=function(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e},e.exports.__esModule=!0,e.exports.default=e.exports}(c);var l=u(c.exports),p=["none","row","col","outer"],f={onRowClick:Function},d=Object.assign({data:n.PropTypes.arrayOf(n.PropTypes.any).def([]),columns:n.PropTypes.arrayOf(n.PropTypes.shape({label:n.PropTypes.oneOfType([n.PropTypes.func.def((function(){return""})),n.PropTypes.string.def("")]),field:n.PropTypes.oneOfType([n.PropTypes.func.def((function(){return""})),n.PropTypes.string.def("")]),render:n.PropTypes.oneOfType([n.PropTypes.func.def((function(){return""})),n.PropTypes.string.def("")]),width:n.PropTypes.oneOfType([n.PropTypes.number.def(void 0),n.PropTypes.string.def("auto")])})),activeColumn:n.PropTypes.oneOfType([n.PropTypes.number.def(-1),n.PropTypes.arrayOf(n.PropTypes.number.def(-1))]),columnPick:n.PropTypes.commonType(["multi","single","disabled"],"columnPick").def("disabled"),height:n.PropTypes.oneOfType([n.PropTypes.number,n.PropTypes.string]).def("auto"),minHeight:n.PropTypes.oneOfType([n.PropTypes.number,n.PropTypes.string]).def("auto"),rowHeight:n.PropTypes.oneOfType([n.PropTypes.number,n.PropTypes.func]).def(40),headHeight:n.PropTypes.number.def(40),showHead:n.PropTypes.bool.def(!0),virtualEnabled:n.PropTypes.bool.def(!1),border:n.PropTypes.arrayOf(n.PropTypes.commonType(p,"border")).def(["row"]),pagination:n.PropTypes.oneOfType([n.PropTypes.bool.def(!1),n.PropTypes.object.def({})]).def(!1),remotePagination:n.PropTypes.bool.def(!1)},f),v={exports:{}};!function(e){e.exports=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},e.exports.__esModule=!0,e.exports.default=e.exports}(v);var y=u(v.exports),h={exports:{}};!function(e){function t(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}e.exports=function(e,n,r){return n&&t(e.prototype,n),r&&t(e,r),Object.defineProperty(e,"prototype",{writable:!1}),e},e.exports.__esModule=!0,e.exports.default=e.exports}(h);var m=u(h.exports),g={exports:{}};!function(e){function t(n){return e.exports=t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},e.exports.__esModule=!0,e.exports.default=e.exports,t(n)}e.exports=t,e.exports.__esModule=!0,e.exports.default=e.exports}(g);var b=u(g.exports),x={exports:{}},T={exports:{}},P={exports:{}};!function(e){e.exports=function(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r},e.exports.__esModule=!0,e.exports.default=e.exports}(P),function(e){var t=P.exports;e.exports=function(e){if(Array.isArray(e))return t(e)},e.exports.__esModule=!0,e.exports.default=e.exports}(T);var C={exports:{}};!function(e){e.exports=function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)},e.exports.__esModule=!0,e.exports.default=e.exports}(C);var O={exports:{}};!function(e){var t=P.exports;e.exports=function(e,n){if(e){if("string"==typeof e)return t(e,n);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?t(e,n):void 0}},e.exports.__esModule=!0,e.exports.default=e.exports}(O);var w={exports:{}};!function(e){e.exports=function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")},e.exports.__esModule=!0,e.exports.default=e.exports}(w),function(e){var t=T.exports,n=C.exports,r=O.exports,o=w.exports;e.exports=function(e){return t(e)||n(e)||r(e)||o()},e.exports.__esModule=!0,e.exports.default=e.exports}(x);var k=u(x.exports),j=void 0,_=function(e,t,n){var r;if(Object.prototype.hasOwnProperty.call(e,t))return"function"==typeof e[t]?(r=e[t]).call.apply(r,[j].concat(k(n))):e[t]},N=function(e){return"disabled"!==e.columnPick?"multi"===e.columnPick?Array.isArray(e.activeColumn)?e.activeColumn:A(e.activeColumn):Array.isArray(e.activeColumn)?A(e.activeColumn[0]):A(e.activeColumn):[]},A=function(e){return/^\d+$/.test("".concat(e))?[parseInt("".concat(e),10)]:[]},V=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"100%",n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,r="";return r=/^auto|null|undefined$/gi.test("".concat(e))?t:/^\d+\.?\d+$/.test("".concat(e))?"".concat(e,"px"):e,n&&(r="calc(".concat(r," - ").concat(n,")")),r},H=function(e,t){if(e){if("object"===b(e)){var n=Object.prototype.hasOwnProperty.call(e,"current")?e.current:e.value;return/\d+/.test(n)||(n=1),Object.assign(Object.assign(Object.assign({},t),e),{current:n})}return t}return{}},S=m((function e(t,n){y(this,e),this.props=null,this.ctx=null,this.props=t,this.ctx=n})),M=function(){function e(t,n,r,o){y(this,e),this.props=t,this.context=n,this.reactiveProp=r,this.colgroups=o,this.plugins=new S(t,n)}return m(e,[{key:"propActiveCols",get:function(){return this.reactiveProp.activeColumns}},{key:"renderTableHeadSchema",value:function(){return t.createVNode("table",{cellpadding:0,cellspacing:0},[this.renderColGroup(),this.renderHeader()])}},{key:"renderTableBodySchema",value:function(e){return t.createVNode("table",{cellpadding:0,cellspacing:0},[this.renderColGroup(),this.renderTBody(e)])}},{key:"renderTableFooter",value:function(e){var n=this;return t.createVNode(i.default,t.mergeProps(e,{modelValue:e.current,onLimitChange:function(e){return n.handlePageLimitChange(e)},onChange:function(e){return n.hanlePageChange(e)}}),null)}},{key:"handlePageLimitChange",value:function(e){Object.assign(this.props.pagination,{limit:e}),this.context.emit("page-limit-change",e)}},{key:"hanlePageChange",value:function(e){Object.assign(this.props.pagination,{current:e,value:e}),this.context.emit("page-value-change",e)}},{key:"setColumnActive",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],n=this.propActiveCols.find((function(t){return t.index===e}));Object.assign(n,{active:!n.active}),t&&this.propActiveCols.filter((function(t){return t.index!==e&&t.active})).forEach((function(e){Object.assign(e,{active:!1})}))}},{key:"handleColumnHeadClick",value:function(e){"disabled"!==this.props.columnPick&&(this.setColumnActive(e,"single"===this.props.columnPick),this.context.emit("column-pick",this.propActiveCols))}},{key:"renderHeader",value:function(){var e=this,r={"--row-height":"".concat(_(this.props,"headHeight",["thead"]),"px")};return t.createVNode("thead",{style:r},[t.createVNode("tr",null,[this.props.columns.map((function(r,o){return t.createVNode("th",{colspan:1,rowspan:1,class:n.classes({active:e.isColActive(o)}),onClick:function(){return e.handleColumnHeadClick(o)}},[t.createVNode("div",{class:"cell"},[_(r,"label",[r])])])}))])])}},{key:"renderTBody",value:function(e){var n=this;return t.createVNode("tbody",null,[e.map((function(r,o){var a={"--row-height":"".concat(_(n.props,"rowHeight",["tbody",r,o]),"px")};return t.createVNode("tr",{style:a,onClick:function(t){return n.handleRowClick(t,r,o,e)}},[n.props.columns.map((function(a){return t.createVNode("td",{colspan:1,rowspan:1},[t.createVNode("div",{class:"cell"},[n.renderCell(r,a,o,e)])])}))])}))])}},{key:"handleRowClick",value:function(e,t,n,r){this.context.emit("row-click",e,t,n,r,this)}},{key:"renderCell",value:function(e,t,n,r){var o=e[_(t,"field",[t,e])];return"function"==typeof t.render?t.render(o,e,n,r):o}},{key:"isColActive",value:function(e){return"disabled"!==this.props.columnPick&&this.propActiveCols.some((function(t){return t.index===e&&t.active}))}},{key:"renderColGroup",value:function(){var e=this;return t.createVNode("colgroup",null,[(this.colgroups||[]).map((function(r,o){var a,i=n.classes({active:e.isColActive(o)}),s={width:(a=r.calcWidth,V(a,"auto"))};return t.createVNode("col",{class:i,style:s},null)}))])}}]),e}(),E=t.defineComponent({name:"Table",props:d,setup:function(e,r){var o=t.reactive(N(e)),a=t.reactive(e.columns.map((function(e){return Object.assign(Object.assign({},e),{calcWidth:null})}))),i=t.ref(0),u=t.ref(0),c=t.reactive({count:0,limit:10,current:1});c=H(e.pagination,c);var f=function(){if(!e.pagination||e.remotePagination)return i.value=0,void(u.value=e.data.length);i.value=(c.current-1)*c.limit,u.value=c.current*c.limit};f();var d=null,v=t.ref(),y=function(){return(e.columns||[]).map((function(e,t){return{index:t,active:o.some((function(e){return e===t})),_column:e}}))},h=t.reactive({activeColumns:y(),scrollTranslateY:0});t.watch((function(){return[e.activeColumn,e.columns,e.pagination]}),(function(){t.nextTick((function(){h.activeColumns=y();var t=N(e);h.activeColumns.forEach((function(e,n){Object.assign(e,{active:t.some((function(e){return e===n}))})})),c=H(e.pagination,c),f()}))}),{deep:!0});var m=new M(e,r,h,a),g=t.computed((function(){return{minHeight:V(e.minHeight,"auto")}})),b=t.computed((function(){return e.data.slice(i.value,u.value)})),x=t.computed((function(){return e.pagination?e.remotePagination?c:Object.assign(Object.assign({},c),{count:e.data.length}):null})),T=t.computed((function(){var t,n=V(e.height),r=e.showHead?V(e.headHeight):"0",o=(t=e.height,!/^\d+\.?\d*(px|%)?$/.test("".concat(t))),a=e.pagination?40:0,i="calc(".concat(n," - ").concat(r," - ").concat(a,"px - 2px)");return Object.assign({display:"block"},o?{maxHeight:i}:{height:i})})),P=t.computed((function(){return n.classes(l({},n.resolveClassName("table"),!0),(t=e.border,r=["row"],"string"==typeof t&&r.push(t),Array.isArray(t)&&r.push.apply(r,k(t.filter((function(e){return p.includes(e)})))),k(new Set(r)).map((function(e){return"bordered-".concat(e)})).join(" ")));var t,r})),C=n.classes(l({},n.resolveClassName("table-head"),!0)),O=n.classes(l({},n.resolveClassName("table-body"),!0)),w=n.classes(l({},n.resolveClassName("table-footer"),!0)),j=function(e){var t=e[1];h.scrollTranslateY=t.translateY};return t.onMounted((function(){d=function(e,t){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:60,o=arguments.length>3&&void 0!==arguments[3]&&arguments[3],a=n.throttle((function(){"function"==typeof t&&t()}),r),i=new ResizeObserver((function(){a()}));return o&&"function"==typeof t&&t(),{start:function(){i.observe(e)},stop:function(){i.disconnect(),i.unobserve(e)}}}(v.value,(function(){!function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:20,r=(e.getBoundingClientRect()||{}).width,o=[],a=function(e,t){var n=!(arguments.length>2&&void 0!==arguments[2])||arguments[2];Object.assign(e,{calcWidth:t}),n&&(r-=t)<0&&(r=0)};if(t.forEach((function(e,t){var i=String(e.width),s=!0;if(/^\d+\.?\d*(px)?$/.test(i)){var u=Number(i.replace("px",""));a(e,u),s=!1}if(/^\d+\.?\d*%$/.test(i)){var c=n;if(r>0){var l=Number(i.replace("%",""));c=r*l/100}a(e,c),s=!1}s&&o.push(t)})),o.length>0){var i=n;r>0&&(i=r/o.length,o.forEach((function(e){return a(t[e],i,!1)})))}}(v.value,a,20)}),60,!0),d.start()})),t.onBeforeUnmount((function(){d.stop(),d=null})),r.expose({plugins:m.plugins}),function(){return t.createVNode("div",{class:P.value,style:g.value,ref:v},[t.createVNode("div",{class:C},[e.showHead&&m.renderTableHeadSchema()]),t.createVNode(s.default,{lineHeight:e.rowHeight,class:O,style:T.value,list:b.value,onContentScroll:j,throttleDelay:0,enabled:e.virtualEnabled},{default:function(t){return m.renderTableBodySchema(t.data||e.data)},afterContent:function(){return t.createVNode("div",{class:n.resolveClassName("table-fixed")},null)}}),t.createVNode("div",{class:w},[e.pagination&&m.renderTableFooter(x.value)])])}}}),$=n.withInstall(E);e.default=$,Object.defineProperty(e,"__esModule",{value:!0})}));

package/lib/table/props.d.ts

@@ -89,6 +89,14 @@ export declare const tableProps: {
             [key: string]: any;
         });
     };
+    /**
+     * 是否启用远程分页
+     */
+    remotePagination: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
 };
 export declare type Column = {
     label: Function | string;

package/lib/table/render.d.ts

@@ -22,6 +22,8 @@ export default class TableRender {
      */
     renderTableBodySchema(rows: any[]): JSX.Element;
     renderTableFooter(options: any): JSX.Element;
+    private handlePageLimitChange;
+    private hanlePageChange;
     /**
      * 指定列选中状态
      * @param index 指定选中的列Index

package/lib/table/table.css

@@ -1,8 +1,12 @@
 .bk-table {
-  overflow: auto;
+  overflow: hidden;
+  height: 100%;
   border-top: 1px solid #dcdee5;
   border-bottom: 1px solid #dcdee5;
 }
+.bk-table .bk-table-body {
+  overflow: auto;
+}
 .bk-table .bk-table-head,
 .bk-table .bk-table-body {
   background: white;
@@ -49,6 +53,9 @@
 .bk-table .bk-table-body table tbody tr:hover td {
   background: #f5f7fa;
 }
+.bk-table .bk-table-footer {
+  line-height: 40px;
+}
 .bk-table.bordered-row .cell {
   border-bottom: 1px solid #dcdee5;
 }

package/lib/table/table.d.ts

@@ -43,6 +43,11 @@ declare const _default: import("vue").DefineComponent<{
             [key: string]: any;
         });
     };
+    remotePagination: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
 }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     onRowClick: FunctionConstructor;
     data: import("vue-types").VueTypeDef<any[]> & {
@@ -87,6 +92,11 @@ declare const _default: import("vue").DefineComponent<{
             [key: string]: any;
         });
     };
+    remotePagination: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
 }>>, {
     data: any[];
     height: string | number;
@@ -100,5 +110,6 @@ declare const _default: import("vue").DefineComponent<{
     pagination: boolean | {
         [key: string]: any;
     };
+    remotePagination: boolean;
 }>;
 export default _default;

package/lib/table/table.less

@@ -1,9 +1,14 @@
 @import '../styles/themes/themes.less';
 
 .@{bk-prefix}-table {
-  overflow: auto;
+  overflow: hidden;
+  height: 100%;
   border-top: 1px solid @table-border-color;
   border-bottom: 1px solid @table-border-color;
+  .@{bk-prefix}-table-body {
+    overflow: auto;
+  }
+
   .@{bk-prefix}-table-head,
   .@{bk-prefix}-table-body {
     background: @table-bg-color;
@@ -55,6 +60,10 @@
     }
   }
 
+  .@{bk-prefix}-table-footer {
+    line-height: 40px;
+  }
+
   &.bordered-row {
     .cell { 
       border-bottom: 1px solid @table-border-color;

package/lib/table/table.variable.css

@@ -92,10 +92,14 @@
   --table-row-hover-bg-color: #f5f7fa;
 }
 .bk-table {
-  overflow: auto;
+  overflow: hidden;
+  height: 100%;
   border-top: 1px solid var(--table-border-color);
   border-bottom: 1px solid var(--table-border-color);
 }
+.bk-table .bk-table-body {
+  overflow: auto;
+}
 .bk-table .bk-table-head,
 .bk-table .bk-table-body {
   background: var(--table-bg-color);
@@ -142,6 +146,9 @@
 .bk-table .bk-table-body table tbody tr:hover td {
   background: var(--table-row-hover-bg-color);
 }
+.bk-table .bk-table-footer {
+  line-height: 40px;
+}
 .bk-table.bordered-row .cell {
   border-bottom: 1px solid var(--table-border-color);
 }