带斑马纹表格
带边框表格
带状态表格
可将表格内容 highlight 显示,方便区分「成功、信息、警告、危险」等内容
固定表头滚动栏
固定列滚动栏
固定列和表头滚动栏
流体高度
当数据量动态变化时,可以为 Table 设置一个最大高度。
多级表头
¶单选---选择单行数据时使用色块表示。
多选
排序
筛选
对表格进行筛选,可快速查找到自己想看的数据。
自定义列模板
自定义列的显示内容,可组合其他组件使用。
通过 Scoped slot
可以获取到 row, column, $index 和 store(table 内部的状态管理)的数据,用法参考 demo。
展开行
树形数据与懒加载
自定义表头---通过设置 Scoped slot 来自定义表头。
表尾合计行
合并行或列
自定义索引
Table Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
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 | medium / small / mini | — |
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 的回调方法&#x |