基于VXE-Table进行封装的Table组件

Install

npm i bk-table-next
import BkTableNext, { BkColumnNext, BkColgroupNext, BkTableGrid, BkColumnMap, BkTableMap, setTableGlobalConfig } from 'bk-table-next';
import 'bk-table-next/dist/dist.css';

组件导出说明

// 默认导出 BkTableNext
export default BkTableNext;

// 支持组合式引入
export { BkColumnNext, BkColgroupNext, BkTableGrid, BkColumnMap, BkTableMap, setTableGlobalConfig };

导出组件说明

| 组件 | 说明 | | --- | ----------- | | BkTableNext | Table 组件，区别于BkTableGrid组件， Column配置需要结合BkColumnNext使用，不支持props.columns配置 | | BkColumnNext | Table Column组件, 配合BkTableNext使用 | | BkColgroupNext | 配合BkColumnNext配置分组表头 | | BkTableGrid | 区别于BkTableNext，支持全属性式的props配置，支持props.columns配置 | | BkColumnMap | 用于bkui-vue/table-column组件的快速接入，使用BkColumnMap可快速替换bkui-vue/table-column组件，相关映射已经内置 | | BkTableMap | 用于bkui-vue/table组件的快速接入，使用BkTableMap可快速替换bkui-vue/table组件，相关映射已经内置 |

使用说明

Vxe-table的配置在这里都可以直接使用

• BkTableNext 对应 Table basic table，可以直接使用官网案例，替换组件名为 BkTableNext 即可
• BkColumnNext 对应 Table basic table column，可以直接使用官网案例，替换组件名为 BkColumnNext 即可
• BkColgroupNext 对应 Table basic table column，可以直接使用官网案例，替换组件名为 BkColgroupNext 即可
• BkTableGrid 对应 Grid configuration table，可以直接使用官网案例，替换组件名为 BkTableGrid 即可

区别

• 分页组件：BkTableNext 和 BkTableGrid 内置分页配置项 props.pagination,继承 bkui-vue/table配置项，分页组件也是使用的 bkui-vue/pagination,Vxe-table自带的分页功能任然保留，但是要使用的话需要配置vxe-ui-pc组件库；
• 因为没有内置 vxe-ui-pc组件库，组件中依赖 vxe-ui-pc 相关的功能会有问题，待处理...
• 行拖拽：内置行拖拽功能，继承实现 bkui-vue/table 的配置项 props.rowDragable