用于展示多条结构类似的数据,可对数据进行排序、筛选、对比或其他自定义操作。
选择多行数据时使用 Checkbox。
对表格进行排序,可快速查找或对比数据。
当行内容过多并且不想显示横向滚动条时,可以使用 Table 展开行功能。
表头支持自定义。
显示的列目可自定义。
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| data | 数据源 | Array | [] | -- |
| loading | 表格加载状态 | Boolean | true | false | false |
| columns | 字段列表 | Array | [] | -- |
| height | Table 的高度,默认为自动高度。如果 height 为 number 类型,单位 px;如果 height 为 string 类型,则这个高度会设置为 Table 的 style.height 的值,Table 的高度会受控于外部样式。 | string | number | -- | -- |
| max-height | Table 的最大高度。合法的值为数字或者单位为 px 的高度。 | string | number | -- | -- |
| empty-text | 空数据时显示的文本内容,也可以通过 slot="empty" 设置。 | string | -- | -- |
| span-method | 合并行或列的计算方法。 | Function({ row, column, rowIndex, columnIndex }) | -- | -- |
| summary-method | 自定义的合计计算方法。 | Function({ columns, data }) | -- | -- |
| select-on-indeterminate | 在多选表格中,当仅有部分行被选中时,点击表头的多选框时的行为。若为 true,则选中所有行;若为 false,则取消选择所有行。 | Boolean | true | false | true |
| indent | 展示树形数据时,树节点的缩进。 | Number | -- | -- |
| indent | 展示树形数据时,树节点的缩进。 | Number | -- | -- |
| load | 加载子节点数据的函数,lazy 为 true 时生效,函数第二个参数包含了节点的层级信息。 | Function(row, treeNode, resolve) | -- | -- |
| default-sort | 默认的排序列的 prop 和顺序。它的prop属性指定默认的排序的列,order指定默认排序的顺序。 | Object | order: ascending, descending | 如果只指定了prop, 没有指定order, 则默认顺序是ascending |
| expand-row-keys | 可以通过该属性设置 Table 目前的展开行,需要设置 row-key 属性才能使用,该属性为展开行的 keys 数组。 | Array | -- | -- |
| default-expand-all | 是否默认展开所有行,当 Table 包含展开行存在或者为树形表格时有效。 | Boolean | true | false | false |
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| prop | 数据源渲染的字段名 | String | -- | -- |
| label | 显示的列标题 | String | -- | -- |
| type | 类型 | String | selection(多选) | expand(展开)| index(序号) | -- |
| sortable | 排序 | Boolean | true | false | false |
| filterEmpty | 过滤空值展示,空值默认展示"--" | Boolean | true | false | false |
| setColum | 设置表格列 | Boolean | true | false | false |
| isConfigurable | 该列是否可以配置显示/隐藏 | Boolean | true | false | true |
| width | 对应列的宽度 | String | -- | -- |
| min-width | 对应列的最小宽度,与 width 的区别是 width 是固定的,min-width 会把剩余宽度按比例分配给设置了 min-width 的列 | String | -- | -- |
| show-overflow-tooltip | 当内容过长被隐藏时显示 tooltip | Boolean | true | false | false |
| align | 对齐方式 | String | left | center | right/td> | -- |
| header-align | 表头对齐方式,若不设置该项,则使用表格的对齐方式 | String | left | center | right/td> | -- |
| sort-orders | 数据在排序时所使用排序策略的轮转顺序,仅当 sortable 为 true 时有效。需传入一个数组,随着用户点击表头,该列依次按照数组中元素的顺序进行排序 | Array | 数组中的元素需为以下三者之一:ascending 表示升序,descending 表示降序,null 表示还原为原始顺序 | ['ascending', 'descending', null] |
| 方法名 | 说明 | 回调参数 | 返回值 |
|---|---|---|---|
| renderIcon | 自定义单元格图标 | row | success | error |
| sort-method | 对数据进行排序的时候使用的方法,仅当 sortable 设置为 true 的时候有效,需返回一个数字,和 Array.sort 表现一致 | a, b | -- |
| sort-by | 指定数据按照哪个属性进行排序,仅当 sortable 设置为 true 且没有设置 sort-method 的时候有效。如果 sort-by 为数组,则先按照第 1 个属性排序,如果第 1 个相等,再按照第 2 个排序,以此类推 | row, index | -- |
| 插槽名 | 说明 | 相关示例 |
|---|---|---|
| column.prop | 自定义表格内容 | 请看例子:"基础用法" |
| column.prop + '-header' | 自定义表头数据 | 请看例子:"自定义表头" |
| 参数 | 说明 | 回调参数 |
|---|---|---|
| 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 |
| 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 } |
| header-contextmenu | 当某一列的表头被鼠标右键点击时触发该事件 | column, event |
| header-dragend | 当拖动表头改变了列的宽度的时候会触发该事件 | newWidth, oldWidth, column, event |
| expand-change | 当用户对某一行展开或者关闭的时候会触发该事件(展开行时,回调的第二个参数为 expandedRows;树形表格时第二参数为 expanded) | row, (expandedRows | expanded) |
| overflow-colnum | 当显示字段数量超过限制显示数量时 | column |