DynamicTable 动态表格
ElTable 表格列的顺序都由 ElTableColumn 的模板决定，在动态更改 column 数据方面不够灵活，因此在兼容 ElTable 表格的所有属性及方法前提下，结合常见的业务场景集成了诸如导航分页加载等功能封装成动态表格组件。所谓动态表格，就是将原先 ElTableColumn 表格列的模板内容用数据 columnItem 表示，在表格列数据发生变化时，能够自动更新表格内容。 好处是方便抽离出数据及无状态组件，灵活的维护表格列的顺序，更新表格列的数据，以及添加新的表格列等。
基础用法
基础的动态表格展示用法。
表格布局
通过属性 align 可以指定表格中单元格、行和列的布局方式
带斑马纹表格
使用带斑马纹的表格，可以更容易区分出不同行的数据。
带边框表格
带状态表格
可将表格内容 highlight 显示，方便区分「成功、信息、警告、危险」等内容。
固定列和表头
纵向内容过多时，可选择固定表头。
流体高度
当数据量动态变化时，可以为 Table 设置一个最大高度。
多级表头
数据结构比较复杂的时候，可使用多级表头来展现数据的层次关系。
单选
选择单行数据时使用色块表示。
多选
你也可以选择多行。
排序
对表格进行排序，可快速查找或对比数据。
筛选
对表格进行筛选，可快速查找到自己想看的数据。
自定义列模板
自定义列的显示内容，可组合其他组件使用。
* 自定义表头
表头支持自定义。
展开行
当行内容过多并且不想显示横向滚动条时，可以使用 Table 展开行功能。
树形数据与懒加载
表尾合计行
若表格展示的是各类数字，可以在表尾显示各列的合计。
合并行或列
多行或多列共用一个数据时，可以合并行或列。
自定义索引
自定义 type=index 列的行号。
* 隐藏列
隐藏指定的列
* 基础分页
* 远程加载分页
DynamicTable 属性
| 属性 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| data | 显示的数据 | array | — | — |
| height | Table 的高度， 默认为自动高度。 如果 height 为 number 类型，单位 px；如果 height 为 string 类型，则这个高度会设置为 Table 的 style.height 的值，Table 的高度会受控于外部样式。 | string / number | — | — |
| max-height | Table 的最大高度。 合法的值为数字或者单位为 px 的高度。 | string / number | — | — |
| stripe | 是否为斑马纹 table | boolean | — | false |
| border | 是否带有纵向边框 | boolean | — | false |
| size | Table 的尺寸 | string | large / default /small | — |
| fit | 列的宽度是否自撑开 | boolean | — | true |
| show-header | 是否显示表头 | boolean | — | true |
| highlight-current-row | 是否要高亮当前行 | boolean | — | false |
| current-row-key | 当前行的 key，只写属性 | string / number | — | — |
| row-class-name | 行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。 | function({ row, rowIndex }) / string | — | — |
| row-style | 行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。 | function({ row, rowIndex }) / object | — | — |
| cell-class-name | 单元格的 className 的回调方法，也可以使用字符串为所有单元格设置一个固定的 className。 | function({ row, column, rowIndex, columnIndex }) / string | — | — |
| cell-style | 单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有单元格设置一样的 Style。 | function({ row, column, rowIndex, columnIndex }) / object | — | — |
| header-row-class-name | 表头行的 className 的回调方法，也可以使用字符串为所有表头行设置一个固定的 className。 | function({ row, rowIndex }) / string | — | — |
| header-row-style | 表头行的 style 的回调方法，也可以使用一个固定的 Object 为所有表头行设置一样的 Style。 | function({ row, rowIndex }) / object | — | — |
| header-cell-class-name | 表头单元格的 className 的回调方法，也可以使用字符串为所有表头单元格设置一个固定的 className。 | function({ row, column, rowIndex, columnIndex }) / string | — | — |
| header-cell-style | 表头单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。 | function({ row, column, rowIndex, columnIndex }) / object | — | — |
| row-key | 行数据的 Key，用来优化 Table 的渲染； 在使用reserve-selection功能与显示树形数据时，该属性是必填的。 类型为 String 时，支持多层访问：user.info.id，但不支持 user.info[0].id，此种情况请使用 Function。 | function(row) / string | — | — |
| empty-text | 空数据时显示的文本内容， 也可以通过 #empty 设置 | string | — | No Data |
| default-expand-all | 是否默认展开所有行，当 Table 包含展开行存在或者为树形表格时有效 | boolean | — | false |
| expand-row-keys | 可以通过该属性设置 Table 目前的展开行，需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组。 | array | — | — |
| default-sort | 默认的排序列的 prop 和顺序。 它的 prop 属性指定默认的排序的列，order 指定默认排序的顺序 | object | order: ascending / descending | 如果只指定了 prop, 没有指定 order, 则默认顺序是 ascending |
| tooltip-effect | tooltip effect 属性 | string | dark / light | dark |
| show-summary | 是否在表尾显示合计行 | boolean | — | false |
| sum-text | 合计行第一列的文本 | string | — | 合计 |
| summary-method | 自定义的合计计算方法 | function({ columns, data }) | — | — |
| span-method | 合并行或列的计算方法 | function({ row, column, rowIndex, columnIndex }) | — | — |
| select-on-indeterminate | 在多选表格中，当仅有部分行被选中时，点击表头的多选框时的行为。 若为 true，则选中所有行；若为 false，则取消选择所有行 | boolean | — | true |
| indent | 展示树形数据时，树节点的缩进 | number | — | 16 |
| lazy | 是否懒加载子节点数据 | boolean | — | — |
| load | 加载子节点数据的函数，lazy 为 true 时生效，函数第二个参数包含了节点的层级信息 | function(row, treeNode, resolve) | — | — |
| tree-props | 渲染嵌套数据的配置选项 | object | — | { hasChildren: 'hasChildren', children: 'children' } |
| table-layout | 设置表格单元、行和列的布局方式 | string | fixed / auto | fixed |
| scrollbar-always-on | always show scrollbar | boolean | — | false |
| pagination | 设置导航配置，详情查看 👇🏻 导航 options | boolean / Object | - | { background: true, pageSize: 50, total: 0, layout: 'prev, pager, next, total, sizes', pageSizes: [10, 20, 30, 40, 50], pagerCount: 7, currentPage: 1} |
| columns | 列的配置，详情查看 👇🏻 列 options | Array | - | [] |
列 options
| 属性 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| type | 对应列的类型。 如果设置了selection则显示多选框； 如果设置了index 则显示该行的索引（从 1 开始计算）； 如果设置了expand 则显示为一个可展开的按钮 | string | selection / index / expand | — |
| index | 如果设置了 type=index，可以通过传递 index 属性来自定义索引 | number / function(index) | — | — |
| label | column 的 key，如果需要使用 filter-change 事件，则需要此属性标识是哪个 column 的筛选条件 | string | — | — |
| column-key | column 的 key， column 的 key， 如果需要使用 filter-change 事件，则需要此属性标识是哪个 column 的筛选条件 | string | — | — |
| prop | 字段名称 对应列内容的字段名， 也可以使用 property属性 | string | — | — |
| width | 对应列的宽度 | string / number | — | — |
| min-width | 对应列的最小宽度， 对应列的最小宽度， 与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列 | string / number | — | — |
| fixed | 列是否固定在左侧或者右侧。 true 表示固定在左侧 | string / boolean | true / 'left' / 'right' | — |
| render-header | 列标题 Label 区域渲染使用的 Function | function({ column, $index }) | — | — |
| sortable | 对应列是否可以排序， 如果设置为 'custom'，则代表用户希望远程排序，需要监听 Table 的 sort-change 事件 | boolean / string | true / false / 'custom' | false |
| sort-method | 指定数据按照哪个属性进行排序，仅当sortable设置为true且没有设置sort-method的时候有效。 如果 sort-by 为数组，则先按照第 1 个属性排序，如果第 1 个相等，再按照第 2 个排序，以此类推 | function(a, b) | — | — |
| sort-by | 指定数据按照哪个属性进行排序，仅当 sortable 设置为 true 且没有设置 sort-method 的时候有效。 如果 sort-by 为数组，则先按照第 1 个属性排序，如果第 1 个相等，再按照第 2 个排序，以此类推 | function(row, index) / string / array | — | — |
| sort-orders | 数据在排序时所使用排序策略的轮转顺序，仅当 sortable 为 true 时有效。 需传入一个数组，随着用户点击表头，该列依次按照数组中元素的顺序进行排序 | array | 数组中的元素需为以下三者之一：ascending 表示升序，descending 表示降序，null 表示还原为原始顺序 | ['ascending', 'descending', null] |
| resizable | 对应列是否可以通过拖动改变宽度（需要在 el-table 上设置 border 属性为真） | boolean | — | false |
| formatter | 用来格式化内容 | function(row, column, cellValue, index) | — | — |
| show-overflow-tooltip | 当内容过长被隐藏时显示 tooltip | boolean | — | false |
| align | 对齐方式 | string | left / center / right | left |
| header-align | 表头对齐方式， 若不设置该项，则使用表格的对齐方式 | string | left / center / right | — |
| class-name | 列的 className | string | — | — |
| label-class-name | 当前列标题的自定义类名 | string | — | — |
| selectable | 仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选 | function(row, index) | — | — |
| reserve-selection | 仅对 type=selection 的列有效， 请注意， 需指定 row-key 来让这个功能生效。 | boolean | — | false |
| filters | 数据过滤的选项， 数组格式，数组中的元素需要有 text 和 value 属性。 数组中的每个元素都需要有 text 和 value 属性。 | array[{ text, value }] | — | — |
| filter-placement | 过滤弹出框的定位 | string | 与 Tooltip 的 placement 属性相同 | — |
| filter-multiple | 数据过滤的选项是否多选 | boolean | — | true |
| filter-method | 数据过滤使用的方法， 如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示。 | function(value, row, column) | — | — |
| filtered-value | 选中的数据过滤项，如果需要自定义表头过滤的渲染方式，可能会需要此属性。 | array | — | — |
| showHeaderTooltip | 是否展示表头 toolTip 提示 | Boolean | - | false |
| headerTooltipText | showHeaderTooltip 为 true 时，表头 toolTip 提示内容 | string | - | - |
| slot | 自定义列的插槽名称，插槽回调作用域参数为 { row, column, $index } | string | - | - |
| slotHeader | 自定义表头的插槽名称，插槽回调作用域参数为 { column, $index } | string | - | - |
导航 options
| 属性 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| small | 是否使用小型分页样式 | boolean | — | false |
| background | 是否为分页按钮添加背景色 | boolean | — | false |
| page-size | 每页显示条目个数，支持 v-model 双向绑定 | number | — | 10 |
| default-page-size | 每页显示条目数的初始值 | number | - | - |
| total | 总条目数 | number | — | — |
| page-count | 总页数 total 和 page-count 设置任意一个就可以达到显示页码的功能；如果要支持 page-sizes 的更改，则需要使用 total 属性 | number | — | — |
| pager-count | 设置最大页码按钮数。 页码按钮的数量，当总页数超过该值时会折叠 | number | 5 ≤ x ≤ 21 的奇数 | 7 |
| current-page | 当前页数，支持 v-model 双向绑定 | number | — | 1 |
| default-current-page | 当前页数的初始值 | number | - | - |
| layout | 组件布局，子组件名用逗号分隔 | string | sizes / prev / pager / next / jumper / -> / total / slot | 'prev, pager, next, jumper, ->, total' |
| page-sizes | 每页显示个数选择器的选项设置 | number[] | — | [10, 20, 30, 40, 50, 100] |
| popper-class | 每页显示个数选择器的下拉框类名 | string | — | — |
| prev-text | 替代图标显示的上一页文字 | string | — | — |
| next-text | 替代图标显示的下一页文字 | string | — | — |
| disabled | 是否禁用分页 | boolean | — | false |
| hide-on-single-page | 只有一页时是否隐藏 | boolean | — | - |
DynamicTable 事件
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| select | 当用户手动勾选数据行的 Checkbox 时触发的事件 | selection, row |
| select-all | 当用户手动勾选全选 Checkbox 时触发的事件 | selection |
| selection-change | 当选择项发生变化时会触发该事件 | selection |
| cell-mouse-enter | 当单元格 hover 进入时会触发该事件 | row, column, cell, event |
| cell-mouse-leave | 当单元格 hover 退出时会触发该事件 | row, column, cell, event |
| cell-click | 当某个单元格被点击时会触发该事件 | row, column, cell, event |
| cell-dblclick | 当某个单元格被双击击时会触发该事件 | row, column, cell, event |
| cell-contextmenu | 当某个单元格被鼠标右键点击时会触发该事件 | row, column, cell, event |
| row-click | 当某一行被点击时会触发该事件 | row, column, event |
| row-contextmenu | 当某一行被鼠标右键点击时会触发该事件 | row, column, event |
| row-dblclick | 当某一行被双击时会触发该事件 | row, column, event |
| header-click | 当某一列的表头被点击时会触发该事件 | column, event |
| header-contextmenu | 当某一列的表头被鼠标右键点击时触发该事件 | column, event |
| sort-change | 当表格的排序条件发生变化的时候会触发该事件 | { column, prop, order } |
| filter-change | column 的 key， 如果需要使用 filter-change 事件，则需要此属性标识是哪个 column 的筛选条件 | filters |
| current-change | 当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性 | currentRow, oldCurrentRow |
| header-dragend | 当拖动表头改变了列的宽度的时候会触发该事件 | newWidth, oldWidth, column, event |
| expand-change | 当用户对某一行展开或者关闭的时候会触发该事件（展开行时，回调的第二个参数为 expandedRows；树形表格时第二参数为 expanded） | row, (expandedRows | expanded) |
| page-change | 切换分页导航数据时触发该事件 | {pageSize, currentPage} |
DynamicTable 方法
注意组件抛出了 ElTalbe 的 ref
talbe,expose(table), 调用以下方法示例dynamicTableRef.value!.table.clearSelection()
| 方法名 | 说明 | 参数 |
|---|---|---|
| clearSelection | 用于多选表格，清空用户的选择 | — |
| getSelectionRows | 返回当前选中的行 | |
| toggleRowSelection | 用于多选表格，切换某一行的选中状态， 如果使用了第二个参数，则可直接设置这一行选中与否 | row, selected |
| toggleAllSelection | 用于多选表格，切换全选和全不选 | — |
| toggleRowExpansion | 用于可扩展的表格或树表格，如果某行被扩展，则切换。 使用第二个参数，您可以直接设置该行应该被扩展或折叠。 | row, expanded |
| setCurrentRow | 用于单选表格，设定某一行为选中行， 如果调用时不加参数，则会取消目前高亮行的选中状态。 | row |
| clearSort | 用于清空排序条件，数据会恢复成未排序的状态 | — |
| clearFilter | 传入由columnKey 组成的数组以清除指定列的过滤条件。 如果没有参数，清除所有过滤器 | columnKeys |
| doLayout | 对 Table 进行重新布局。 当表格可见性变化时，您可能需要调用此方法以获得正确的布局 | — |
| sort | 手动排序表格。 参数 prop 属性指定排序列，order 指定排序顺序。 | prop: string, order: string |
| scrollTo | 滚动到一组特定坐标 | (options: ScrollToOptions | number, yCoord?: number) |
| setScrollTop | 设置垂直滚动位置 | top |
| setScrollLeft | 设置水平滚动位置 | left |
DynamicTable 插槽
组件表格内部插槽是根据列配置项动态生成的，但是为了方便使用，提供了默认组件留空的插槽。
| 插槽名 | 说明 | 子标签 |
|---|---|---|
| pageAside | 分页导航左边的空白位置 | — |
待办
以下功能 ElTable 本身不支持，由于 DynamicTalbe 是基于 ElTable 二次封装的，实现以下部分功能更多是需要操作 dom 层面, 是否需要集成还需考虑。 ElementPlus 团队也有重构 ElTable 的想法， 如此，我们现在还是借助 sortablejs 等库实现以下部分功能。或者使用其他的交互方式实现需求。
- [ ] 行的虚拟滚动
- [ ] 列的虚拟滚动
- [ ] 行的拖动排序
- [ ] 列的拖动排序