虚拟表格
ant-design-vue 风格虚拟表格。
安装
bash
$ npm install @vue-virtual-components/antd-tablebash
$ pnpm add @vue-virtual-components/antd-tablebash
$ yarn add @vue-virtual-components/antd-table基本用法
简单的表格，最后一列是各种操作。
完整用法
复杂的表格，展示表格目前支持的各种用法。
API
Table
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| tableStyle | 表格风格 | antd | antd2 | antd |
| bordered | 是否展示外边框和列边框 | boolean | false |
| columns | 表格列的配置描述，具体项见下表 | array | - |
| data | 数据数组 | object[] | [] |
| getPopupContainer | 设置表格内各类浮层的渲染节点，如筛选菜单 | (triggerNode) => HTMLElement | - |
| loading | 页面是否加载中 | boolean | false |
| locale | 默认文案设置，目前包括筛选、排序、空数据文案 | object | emptyText: '暂无数据', selectionNone: '清空所有', selectionInvert: '反选当页', selectionAll: '全选所有', triggerDesc: '点击降序', triggerAsc: '点击升序', cancelSort: '取消排序' |
| rowClassName | 表格行的类名 | string | Function(record, index):string | - |
| rowKey | 表格行 key 的取值，可以是字符串或一个函数 | string | Function(record):string | 'id' |
| rowSelection | 列表项是否可选择，配置项 | object | - |
| scroll | 表格是否可滚动，也可以指定滚动区域的宽、高，配置项 | object | - |
| showSorterTooltip | 表头是否显示下一次排序的 tooltip 提示。当参数类型为对象时，将被设置为 Tooltip 的属性 | boolean | Tooltip props | true |
| size | 表格大小 | default | middle | small | default |
| tableLayout | 表格元素的 table-layout 属性，设为 fixed 表示内容不会影响列的布局 | auto | fixed | fixed |
事件
| 参数 | 说明 | 回调参数 |
|---|---|---|
| change | 排序变化时触发 | Function({ currentDataSource, sorter }) |
Column
列描述数据对象，是 columns 中的一项，Column 使用相同的 API。
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| headerSlot | 个性化头部单元格 | v-slot:[headerSlot]="{ column }" | - |
| slot | 个性化单元格 | v-slot:[slot]="{text, record, index, column}" | 取值优先级：slot || key |
| align | 设置列的对齐方式 | left | right | center | left |
| colSpan | 表头列的colspan | number | - |
| rowSpan | 表头列的rowspan | number | - |
| customHeaderCell | 设置头部单元格属性 | Function(column) | - |
| dataIndex | 列数据在数据项中对应的路径，支持通过数组查询嵌套路径 | string | string[] | number | - |
| defaultSortOrder | 默认排序顺序 | ascend | descend | false | - |
| fixed | 列是否固定 | left | right | - |
| key | Vue 需要的 key | string | - |
| minWidth | 列最小宽度 | number | - |
| showSorterTooltip | 表头显示下一次排序的 tooltip 提示, 覆盖 table 中 showSorterTooltip | boolean | Tooltip props | - |
| sorter | 排序函数，本地排序使用一个函数(参考 Array.sort 的 compareFunction)，需要服务端排序可设为 true | Function | boolean | - |
| sortOrder | 排序的受控属性，外界可用此控制列的排序，可设置为 'ascend' 'descend' false | boolean | string | - |
| title | 列头显示文字 | string | - |
| width | 列宽度 | number | - |
RowSelection
选择功能的配置。
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| fixed | 把选择框列固定在左边 | boolean | - |
| getCheckboxProps | 选择框的默认属性配置 | Function(record) | - |
| hideSelectAll | 隐藏全选勾选框与自定义选择项 | boolean | false |
| selectedRowKeys | 指定选中项的 key 数组，需要和 onChange 进行配合 | string[] | [] |
| selections | 自定义选择项 配置项, 设为 true 时使用默认选择项 | object[] | boolean | true |
| type | 多选/单选，checkbox or radio | string | checkbox |
| onChange | 选中项发生变化时的回调 | Function(selectedRowKeys, selectedRows) | - |
| onSelect | 用户手动选择/取消选择某列的回调 | Function(record, selected, selectedRows, nativeEvent) | - |
| onSelectAll | 用户手动选择/取消选择所有列的回调 | Function(selected, selectedRows, changeRows) | - |
| onSelectInvert | 用户手动选择反选的回调 | Function(selectedRows) | - |
| onSelectNone | 用户清空选择的回调 | Function() | - |
Scroll
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| x | 设置横向滚动，也可用于指定滚动区域的宽，可以设置为像素值，百分比，true 和 'max-content' | string | number | true | - |
| y | 设置纵向滚动，也可用于指定滚动区域的高，可以设置为像素值 | string | number | - |
Selection
自定义选择配置项
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| key | Vue 需要的 key，建议设置 | string | - |
| text | 选择项显示的文字 | string | VNode | - |
| onSelect | 选择项点击回调 | Function(changeableRowKeys) | - |