bkui-vue 0.0.1-beta.15 → 0.0.1-beta.18

package/lib/table/index.js

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue"),require("../shared"),require("../virtual-render")):"function"==typeof define&&define.amd?define(["exports","vue","../shared","../virtual-render"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).bkuiVue={},e.Vue,e.Shared,e["@bkui-vue/virtual-render"])}(this,(function(e,t,r,o){"use strict";function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=n(o);function i(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var a={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}(a);var u=i(a.exports),c={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),virtualEnabled:r.PropTypes.bool.def(!1)},p={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}(p);var l=i(p.exports),d={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}(d);var f=i(d.exports),y={exports:{}},v={exports:{}},m={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}(m),function(e){var t=m.exports;e.exports=function(e){if(Array.isArray(e))return t(e)},e.exports.__esModule=!0,e.exports.default=e.exports}(v);var h={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}(h);var x={exports:{}};!function(e){var t=m.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}(x);var b={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}(b),function(e){var t=v.exports,r=h.exports,o=x.exports,n=b.exports;e.exports=function(e){return t(e)||r(e)||o(e)||n()},e.exports.__esModule=!0,e.exports.default=e.exports}(y);var T=i(y.exports),P=void 0,g=function(e,t,r){var o;if(Object.prototype.hasOwnProperty.call(e,t))return"function"==typeof e[t]?(o=e[t]).call.apply(o,[P].concat(T(r))):e[t]},C=function(e){return"disabled"!==e.columnPick?"multi"===e.columnPick?Array.isArray(e.activeColumn)?e.activeColumn:O(e.activeColumn):Array.isArray(e.activeColumn)?O(e.activeColumn[0]):O(e.activeColumn):[]},O=function(e){return/^\d+$/.test("".concat(e))?[parseInt("".concat(e),10)]:[]},k=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"100%";return/^auto|null|undefined$/gi.test("".concat(e))?t:/^\d+\.?\d+$/.test("".concat(e))?"".concat(e,"px"):e},w=function(){function e(t,r,o){l(this,e),this.props=t,this.context=r,this.reactiveProp=o}return f(e,[{key:"propActiveCols",get:function(){return this.reactiveProp.activeColumns}},{key:"renderTableBodySchema",value:function(e){return t.createVNode("table",{cellpadding:0,cellspacing:0},[this.renderColGroup(),this.renderHeader(),this.renderTBody(e)])}},{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(g(this.props,"headHeight",["thead"]),"px"),"--translate-y":"".concat(this.reactiveProp.scrollTranslateY,"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"},[g(o,"label",[o])])])}))])])}},{key:"renderTBody",value:function(e){var r=this;return t.createVNode("tbody",null,[e.map((function(e,o){var n={"--row-height":"".concat(g(r.props,"rowHeight",["tbody",e,o]),"px")};return t.createVNode("tr",{style:n},[r.props.columns.map((function(r){return t.createVNode("td",{colspan:1,rowspan:1},[t.createVNode("div",{class:"cell"},[e[g(r,"field",[r,e])]])])}))])}))])}},{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.props.columns||[]).map((function(o,n){var s,i=r.classes({active:e.isColActive(n)}),a={width:(s=o.width,k(s,"auto"))};return t.createVNode("col",{class:i,style:a},null)}))])}}]),e}(),_=t.defineComponent({name:"Table",props:c,setup:function(e,o){var n=t.reactive(C(e)),i=function(){return(e.columns||[]).map((function(e,t){return{index:t,active:n.some((function(e){return e===t})),_column:e}}))},a=t.reactive({activeColumns:i(),scrollTranslateY:0}),c=t.computed((function(){return{height:k(e.height),minHeight:k(e.minHeight)}}));t.watch((function(){return[e.activeColumn,e.columns]}),(function(){t.nextTick((function(){a.activeColumns=i();var t=C(e);a.activeColumns.forEach((function(e,r){Object.assign(e,{active:t.some((function(e){return e===r}))})}))}))}),{deep:!0});var p=new w(e,o,a),l=r.classes(u({},r.resolveClassName("table"),!0));return function(){return t.createVNode(s.default,{className:l,style:c.value,lineHeight:e.rowHeight,contentClassName:r.resolveClassName("table-body"),list:e.data,enabled:e.virtualEnabled},{default:function(t){return p.renderTableBodySchema(t.data||e.data)},afterContent:function(){return t.createVNode("div",{class:r.resolveClassName("table-fixed")},null)}})}}}),A=r.withInstall(_);e.default=A,Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue"),require("../shared"),require("../virtual-render")):"function"==typeof define&&define.amd?define(["exports","vue","../shared","../virtual-render"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).bkuiVue={},e.Vue,e.Shared,e["@bkui-vue/virtual-render"])}(this,(function(e,t,r,n){"use strict";function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=o(n);function i(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var s={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}(s);var u=i(s.exports),c=["none","row","col","outer"],l={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(c,"border")).def(["row"])},p={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}(p);var d=i(p.exports),f={exports:{}};!function(e){function t(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}e.exports=function(e,r,n){return r&&t(e.prototype,r),n&&t(e,n),Object.defineProperty(e,"prototype",{writable:!1}),e},e.exports.__esModule=!0,e.exports.default=e.exports}(f);var v=i(f.exports),y={exports:{}},h={exports:{}},m={exports:{}};!function(e){e.exports=function(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n},e.exports.__esModule=!0,e.exports.default=e.exports}(m),function(e){var t=m.exports;e.exports=function(e){if(Array.isArray(e))return t(e)},e.exports.__esModule=!0,e.exports.default=e.exports}(h);var b={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}(b);var x={exports:{}};!function(e){var t=m.exports;e.exports=function(e,r){if(e){if("string"==typeof e)return t(e,r);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?t(e,r):void 0}},e.exports.__esModule=!0,e.exports.default=e.exports}(x);var g={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}(g),function(e){var t=h.exports,r=b.exports,n=x.exports,o=g.exports;e.exports=function(e){return t(e)||r(e)||n(e)||o()},e.exports.__esModule=!0,e.exports.default=e.exports}(y);var T=i(y.exports),P=void 0,C=function(e,t,r){var n;if(Object.prototype.hasOwnProperty.call(e,t))return"function"==typeof e[t]?(n=e[t]).call.apply(n,[P].concat(T(r))):e[t]},w=function(e){return"disabled"!==e.columnPick?"multi"===e.columnPick?Array.isArray(e.activeColumn)?e.activeColumn:O(e.activeColumn):Array.isArray(e.activeColumn)?O(e.activeColumn[0]):O(e.activeColumn):[]},O=function(e){return/^\d+$/.test("".concat(e))?[parseInt("".concat(e),10)]:[]},k=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,n="";return n=/^auto|null|undefined$/gi.test("".concat(e))?t:/^\d+\.?\d+$/.test("".concat(e))?"".concat(e,"px"):e,r&&(n="calc(".concat(n," - ").concat(r,")")),n},A=v((function e(t,r){d(this,e),this.props=null,this.ctx=null,this.props=t,this.ctx=r})),N=function(){function e(t,r,n,o){d(this,e),this.props=t,this.context=r,this.reactiveProp=n,this.colgroups=o,this.plugins=new A(t,r)}return v(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:"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,n={"--row-height":"".concat(C(this.props,"headHeight",["thead"]),"px")};return t.createVNode("thead",{style:n},[t.createVNode("tr",null,[this.props.columns.map((function(n,o){return t.createVNode("th",{colspan:1,rowspan:1,class:r.classes({active:e.isColActive(o)}),onClick:function(){return e.handleColumnHeadClick(o)}},[t.createVNode("div",{class:"cell"},[C(n,"label",[n])])])}))])])}},{key:"renderTBody",value:function(e){var r=this;return t.createVNode("tbody",null,[e.map((function(e,n){var o={"--row-height":"".concat(C(r.props,"rowHeight",["tbody",e,n]),"px")};return t.createVNode("tr",{style:o},[r.props.columns.map((function(n){return t.createVNode("td",{colspan:1,rowspan:1},[t.createVNode("div",{class:"cell"},[r.renderCell(e,n)])])}))])}))])}},{key:"renderCell",value:function(e,t){var r=e[C(t,"field",[t,e])];return"function"==typeof t.render?t.render(r):r}},{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(n,o){var a,i=r.classes({active:e.isColActive(o)}),s={width:(a=n.calcWidth,k(a,"auto"))};return t.createVNode("col",{class:i,style:s},null)}))])}}]),e}(),_=t.defineComponent({name:"BkTable",props:l,setup:function(e,n){var o=t.reactive(w(e)),i=t.reactive(e.columns.map((function(e){return Object.assign(Object.assign({},e),{calcWidth:null})}))),s=null,l=t.ref(),p=function(){return(e.columns||[]).map((function(e,t){return{index:t,active:o.some((function(e){return e===t})),_column:e}}))},d=t.reactive({activeColumns:p(),scrollTranslateY:0}),f=t.computed((function(){return{minHeight:k(e.minHeight,"auto")}})),v=t.computed((function(){var t=k(e.height),r=e.showHead?k(e.headHeight):"0";return{height:"calc(".concat(t," - ").concat(r," - 2px)"),display:"block"}}));t.watch((function(){return[e.activeColumn,e.columns]}),(function(){t.nextTick((function(){d.activeColumns=p();var t=w(e);d.activeColumns.forEach((function(e,r){Object.assign(e,{active:t.some((function(e){return e===r}))})}))}))}),{deep:!0});var y=new N(e,n,d,i),h=t.computed((function(){return r.classes(u({},r.resolveClassName("table"),!0),(t=e.border,n=["row"],"string"==typeof t&&n.push(t),Array.isArray(t)&&n.push.apply(n,T(t.filter((function(e){return c.includes(e)})))),T(new Set(n)).map((function(e){return"bordered-".concat(e)})).join(" ")));var t,n})),m=r.classes(u({},r.resolveClassName("table-head"),!0)),b=r.classes(u({},r.resolveClassName("table-body"),!0)),x=function(e){var t=e[1];d.scrollTranslateY=t.translateY};return t.onMounted((function(){s=function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:60,o=arguments.length>3&&void 0!==arguments[3]&&arguments[3],a=r.throttle((function(){"function"==typeof t&&t()}),n),i=new ResizeObserver((function(){a()}));return o&&"function"==typeof t&&t(),{start:function(){i.observe(e)},stop:function(){i.disconnect(),i.unobserve(e)}}}(l.value,(function(){!function(e,t){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:20,n=(e.getBoundingClientRect()||{}).width,o=[],a=function(e,t){var r=!(arguments.length>2&&void 0!==arguments[2])||arguments[2];Object.assign(e,{calcWidth:t}),r&&(n-=t)<0&&(n=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=r;if(n>0){var l=Number(i.replace("%",""));c=n*l/100}a(e,c),s=!1}s&&o.push(t)})),o.length>0){var i=r;n>0&&(i=n/o.length,o.forEach((function(e){return a(t[e],i,!1)})))}}(l.value,i,20)}),60,!0),s.start()})),t.onBeforeUnmount((function(){s.stop(),s=null})),n.expose({plugins:y.plugins}),function(){return t.createVNode("div",{class:h.value,style:f.value,ref:l},[t.createVNode("div",{class:m},[e.showHead&&y.renderTableHeadSchema()]),t.createVNode(a.default,{lineHeight:e.rowHeight,contentClassName:b,style:v.value,list:e.data,onContentScroll:x,throttleDelay:0,enabled:e.virtualEnabled},{default:function(t){return y.renderTableBodySchema(t.data||e.data)},afterContent:function(){return t.createVNode("div",{class:r.resolveClassName("table-fixed")},null)}})])}}}),H=r.withInstall(_);e.default=H,Object.defineProperty(e,"__esModule",{value:!0})}));

package/lib/table/props.d.ts

@@ -52,6 +52,14 @@ export declare const tableProps: {
     } & {
         default: number;
     };
+    /**
+     * 是否显示Head
+     */
+    showHead: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
     /**
      * 是否启用虚拟渲染 & 滚动
      * 当数据量很大时，启用虚拟渲染可以解决压面卡顿问题
@@ -61,6 +69,13 @@ export declare const tableProps: {
     } & {
         default: boolean;
     };
+    /**
+     * 表格边框显示设置，可以是一个组合
+     * 生效规则: 除非单独设置 none,否则会追加每个设置
+     */
+    border: import("vue-types").VueTypeDef<string[]> & {
+        default: () => string[];
+    };
 };
 export declare type Column = {
     label: Function | string;
@@ -68,6 +83,9 @@ export declare type Column = {
     render?: Function | string;
     width?: number | string;
 };
+export declare type GroupColumn = {
+    calcWidth?: number;
+} & Column;
 export declare type Columns = ReadonlyArray<Column>;
 export declare type TablePropTypes = Readonly<ExtractPropTypes<typeof tableProps>>;
 export declare type IColumnActive = {

package/lib/table/render.d.ts

@@ -1,11 +1,20 @@
 import { SetupContext } from 'vue';
-import { IColumnActive, IReactiveProp, TablePropTypes } from './props';
+import { GroupColumn, IColumnActive, IReactiveProp, TablePropTypes } from './props';
+import { TablePlugins } from './plugins/index';
 export default class TableRender {
     props: TablePropTypes;
     context: SetupContext;
     reactiveProp: any;
-    constructor(props: TablePropTypes, ctx: SetupContext, reactiveProp: IReactiveProp);
+    colgroups: GroupColumn[];
+    plugins: TablePlugins;
+    constructor(props: TablePropTypes, ctx: SetupContext, reactiveProp: IReactiveProp, colgroups: GroupColumn[]);
     get propActiveCols(): IColumnActive[];
+    /**
+     * 渲染Table Head
+     * @param activeColumns 当前选中的列
+     * @returns
+     */
+    renderTableHeadSchema(): JSX.Element;
     /**
      * 渲染Table主体
      * @param activeColumns 当前选中的列
@@ -33,6 +42,13 @@ export default class TableRender {
      * @returns
      */
     private renderTBody;
+    /**
+     * 渲染表格Cell内容
+     * @param row 当前行
+     * @param column 当前列
+     * @returns
+     */
+    private renderCell;
     /**
      * 判定指定列是否为选中状态
      * @param colIndex 指定列Index

package/lib/table/table.css

@@ -1,44 +1,81 @@
 .bk-table {
   overflow: auto;
+  border-top: 1px solid #dcdee5;
+  border-bottom: 1px solid #dcdee5;
 }
+.bk-table .bk-table-head,
 .bk-table .bk-table-body {
   background: white;
 }
+.bk-table .bk-table-head table,
 .bk-table .bk-table-body table {
   width: 100%;
   border-collapse: collapse;
 }
-.bk-table .bk-table-body table .cell {
+.bk-table .bk-table-head table th,
+.bk-table .bk-table-body table th,
+.bk-table .bk-table-head table td,
+.bk-table .bk-table-body table td {
+  min-width: 80px;
+}
+.bk-table .bk-table-head table th .cell,
+.bk-table .bk-table-body table th .cell,
+.bk-table .bk-table-head table td .cell,
+.bk-table .bk-table-body table td .cell {
   height: var(--row-height);
   padding: 0 15px;
   overflow: hidden;
   line-height: var(--row-height);
+  color: #575961;
+  text-align: left;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.bk-table .bk-table-body table th,
-.bk-table .bk-table-body table td {
-  min-width: 80px;
-  border-bottom: 1px solid #dfe0e5;
-}
+.bk-table .bk-table-head table thead th,
 .bk-table .bk-table-body table thead th {
   position: sticky;
   top: 0;
   z-index: 1;
-  background-color: #fff;
-  transform: translateY(var(--translate-y));
+  color: #313238;
+  background-color: #fafbfd;
 }
-.bk-table .bk-table-body table thead th.active {
+.bk-table .bk-table-head table thead th.active,
+.bk-table .bk-table-body table thead th.active,
+.bk-table .bk-table-head table thead th:hover,
+.bk-table .bk-table-body table thead th:hover {
   background: #f0f1f5;
 }
+.bk-table .bk-table-head table tbody tr:hover td,
 .bk-table .bk-table-body table tbody tr:hover td {
   background: #f5f7fa;
 }
+.bk-table.bordered-row .cell {
+  border-bottom: 1px solid #dcdee5;
+}
+.bk-table.bordered-outer {
+  border-right: 1px solid #dcdee5;
+  border-left: 1px solid #dcdee5;
+}
+.bk-table.bordered-col th .cell,
+.bk-table.bordered-col td .cell {
+  border-right: 1px solid #dcdee5;
+}
+.bk-table.bordered-col th:last-child .cell,
+.bk-table.bordered-col td:last-child .cell {
+  border-right: none;
+}
+.bk-table.bordered-none th .cell,
+.bk-table.bordered-none td .cell {
+  border-top: none;
+  border-right: none;
+  border-bottom: none;
+  border-left: none;
+}
 .bk-table .bk-table-fixed {
   width: 100%;
 }
 .bk-table colgroup col {
-  background: #fff;
+  background: white;
 }
 .bk-table colgroup col.active {
   position: relative;

package/lib/table/table.d.ts

@@ -13,7 +13,43 @@ declare const _default: import("vue").DefineComponent<{
     };
     minHeight: import("vue-types").VueTypeDef<string | number> & {
         default: string | number;
+    }; /** 表格外层容器样式 */
+    rowHeight: import("vue-types").VueTypeDef<any> & {
+        default: any;
+    };
+    headHeight: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    showHead: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
     };
+    virtualEnabled: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    border: import("vue-types").VueTypeDef<string[]> & {
+        default: () => string[];
+    };
+}, () => 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<{
+    data: import("vue-types").VueTypeDef<any[]> & {
+        default: () => any[];
+    };
+    columns: import("vue-types").VueTypeDef<Column[]>;
+    activeColumn: import("vue-types").VueTypeDef<number | number[]>;
+    columnPick: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    height: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    };
+    minHeight: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    }; /** 表格外层容器样式 */
     rowHeight: import("vue-types").VueTypeDef<any> & {
         default: any;
     };
@@ -22,39 +58,28 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: number;
     };
+    showHead: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
     virtualEnabled: 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<{
-    data?: unknown;
-    columns?: unknown;
-    activeColumn?: unknown;
-    columnPick?: unknown;
-    height?: unknown;
-    minHeight?: unknown;
-    rowHeight?: unknown;
-    headHeight?: unknown;
-    virtualEnabled?: unknown;
-} & {
-    data: any[];
-    height: string | number;
-    headHeight: number;
-    columnPick: string;
-    minHeight: string | number;
-    virtualEnabled: boolean;
-} & {
-    columns?: Column[];
-    activeColumn?: number | number[];
-    rowHeight?: any;
-}> & ({} | {}), {
+    border: import("vue-types").VueTypeDef<string[]> & {
+        default: () => string[];
+    };
+}>>, {
     data: any[];
     height: string | number;
+    border: string[];
     headHeight: number;
     columnPick: string;
     minHeight: string | number;
     rowHeight: any;
+    showHead: boolean;
     virtualEnabled: boolean;
 }>;
 export default _default;

package/lib/table/table.less

@@ -2,26 +2,30 @@
 
 .@{bk-prefix}-table {
   overflow: auto;
+  border-top: 1px solid @table-border-color;
+  border-bottom: 1px solid @table-border-color;
+  .@{bk-prefix}-table-head,
   .@{bk-prefix}-table-body {
-    background: @white-color;
+    background: @table-bg-color;
 
     table {
       width: 100%;
       border-collapse: collapse;
 
-      .cell {
-        height: var(--row-height);
-        padding: 0 15px;
-        overflow: hidden;
-        line-height: var(--row-height);
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-   
       th,
       td {
         min-width: 80px;
-        border-bottom: 1px solid #dfe0e5;
+
+        .cell {
+          height: var(--row-height);
+          padding: 0 15px;
+          overflow: hidden;
+          line-height: var(--row-height);
+          color: @table-body-font-color;
+          text-align: left;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
       }
 
       thead {
@@ -29,12 +33,12 @@
           position: sticky; 
           top: 0; 
           z-index: 1;
-          background-color: #fff;
-          transform: translateY(var(--translate-y));
+          color: @table-head-font-color;
+          background-color: @table-head-bg-color;
 
-          &.active {
+          &.active,
+          &:hover {
             background: #f0f1f5;
-            // cursor: ;
           }
         }
       }
@@ -43,20 +47,60 @@
         tr {
           &:hover {
             td {
-              background: #f5f7fa;
+              background: @table-row-hover-bg-color;
             }
           }
         }
       }
     }
   }
+
+  &.bordered-row {
+    .cell { 
+      border-bottom: 1px solid @table-border-color;
+    }
+  }
+
+  &.bordered-outer {
+    border-right: 1px solid @table-border-color;
+    border-left: 1px solid @table-border-color;
+  }
+
+  &.bordered-col {
+    th,
+    td {
+      .cell { 
+        border-right: 1px solid @table-border-color;
+      }
+
+      &:last-child {
+        .cell {
+          border-right: none;
+        }
+      }
+    }
+
+  }
+
+  &.bordered-none {
+    th,
+    td {
+      .cell {
+        border-top: none;
+        border-right: none;
+        border-bottom: none;
+        border-left: none;
+      }
+    }
+  }
+
   .@{bk-prefix}-table-fixed {
     width: 100%;
   }
 
   colgroup {
     col {
-      background: #fff;
+      background: @table-bg-color;
 
       &.active {
         position: relative;

package/lib/table/table.variable.css

@@ -1,5 +1,6 @@
 :root {
   --bk-prefix: bk;
+  --popover-max-height: 216px;
   --primary-color: #3a84ff;
   --success-color: #2dcb56;
   --warning-color: #ff9c01;
@@ -83,48 +84,91 @@
   --date-picker-disabled-bg: #fafbfd;
   --date-picker-dropdown-mb: 4px;
   --date-picker-dropdown-bg: #fff;
+  --table-bg-color: var(--white-color);
+  --table-border-color: #dcdee5;
+  --table-head-bg-color: #fafbfd;
+  --table-head-font-color: #313238;
+  --table-body-font-color: #575961;
+  --table-row-hover-bg-color: #f5f7fa;
 }
 .bk-table {
   overflow: auto;
+  border-top: 1px solid var(--table-border-color);
+  border-bottom: 1px solid var(--table-border-color);
 }
+.bk-table .bk-table-head,
 .bk-table .bk-table-body {
-  background: var(--white-color);
+  background: var(--table-bg-color);
 }
+.bk-table .bk-table-head table,
 .bk-table .bk-table-body table {
   width: 100%;
   border-collapse: collapse;
 }
-.bk-table .bk-table-body table .cell {
+.bk-table .bk-table-head table th,
+.bk-table .bk-table-body table th,
+.bk-table .bk-table-head table td,
+.bk-table .bk-table-body table td {
+  min-width: 80px;
+}
+.bk-table .bk-table-head table th .cell,
+.bk-table .bk-table-body table th .cell,
+.bk-table .bk-table-head table td .cell,
+.bk-table .bk-table-body table td .cell {
   height: var(--row-height);
   padding: 0 15px;
   overflow: hidden;
   line-height: var(--row-height);
+  color: var(--table-body-font-color);
+  text-align: left;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.bk-table .bk-table-body table th,
-.bk-table .bk-table-body table td {
-  min-width: 80px;
-  border-bottom: 1px solid #dfe0e5;
-}
+.bk-table .bk-table-head table thead th,
 .bk-table .bk-table-body table thead th {
   position: sticky;
   top: 0;
   z-index: 1;
-  background-color: #fff;
-  transform: translateY(var(--translate-y));
+  color: var(--table-head-font-color);
+  background-color: var(--table-head-bg-color);
 }
-.bk-table .bk-table-body table thead th.active {
+.bk-table .bk-table-head table thead th.active,
+.bk-table .bk-table-body table thead th.active,
+.bk-table .bk-table-head table thead th:hover,
+.bk-table .bk-table-body table thead th:hover {
   background: #f0f1f5;
 }
+.bk-table .bk-table-head table tbody tr:hover td,
 .bk-table .bk-table-body table tbody tr:hover td {
-  background: #f5f7fa;
+  background: var(--table-row-hover-bg-color);
+}
+.bk-table.bordered-row .cell {
+  border-bottom: 1px solid var(--table-border-color);
+}
+.bk-table.bordered-outer {
+  border-right: 1px solid var(--table-border-color);
+  border-left: 1px solid var(--table-border-color);
+}
+.bk-table.bordered-col th .cell,
+.bk-table.bordered-col td .cell {
+  border-right: 1px solid var(--table-border-color);
+}
+.bk-table.bordered-col th:last-child .cell,
+.bk-table.bordered-col td:last-child .cell {
+  border-right: none;
+}
+.bk-table.bordered-none th .cell,
+.bk-table.bordered-none td .cell {
+  border-top: none;
+  border-right: none;
+  border-bottom: none;
+  border-left: none;
 }
 .bk-table .bk-table-fixed {
   width: 100%;
 }
 .bk-table colgroup col {
-  background: #fff;
+  background: var(--table-bg-color);
 }
 .bk-table colgroup col.active {
   position: relative;

package/lib/table/utils.d.ts

@@ -1,4 +1,4 @@
-import { TablePropTypes } from './props';
+import { GroupColumn, TablePropTypes } from './props';
 /**
  * 解析Prop值 | 可能为多种类型 & 函数返回的场景
  * @param prop 当前Prop
@@ -24,6 +24,32 @@ export declare const resolveWidth: (propWidth: string | number) => string | numb
  * 解析可为数字或者字符串设置的样式配置
  * @param val 配置值
  * @param defaultValue 默认值
+ * @param offset 偏移量
  * @returns 标准化px string
  */
-export declare const resolveNumberOrStringToPix: (val: string | number, defaultValue?: string | number) => string | number;
+export declare const resolveNumberOrStringToPix: (val: string | number, defaultValue?: string | number, offset?: any) => string | number;
+/**
+ * 格式化Border配置为标准Class
+ * @param val
+ * @returns
+ */
+export declare const resolvePropBorderToClassStr: (val: string | string[]) => string;
+/**
+ * 根据Props Column配置计算并设置列宽度
+ * @param root 当前根元素
+ * @param colgroups Columns配置
+ * @param autoWidth 自动填充宽度
+ */
+export declare const resolveColumnWidth: (root: HTMLElement, colgroups: GroupColumn[], autoWidth?: number) => void;
+/**
+ * 监听目标元素的Resize事件
+ * @param root 目标元素
+ * @param callbackFn 执行函数
+ * @param delay 延迟执行时间，默认 60
+ * @param immediate 是否立即执行回调函数
+ * @returns "{ start: () => void, stop: () => void }"
+ */
+export declare const observerResize: (root: HTMLElement, callbackFn: () => void, delay?: number, immediate?: boolean) => {
+    start: () => void;
+    stop: () => void;
+};