Table 表格
用于展示多条结构类似的数据,可对数据进行排序、筛选、对比或其他自定义操作。
基础表格
基础的表格展示用法。
斑马纹
stripe属性可以创建带斑马纹的表格。它接受一个Boolean,默认为false,设置为true即为启用。
带边框
添加表格的边框线。可以使用border属性,它接受一个Boolean,设置为true即可启用。
特定样式
行:通过属性 rowClassName 可以给某一行指定一个样式名称。
列:通过给列 columns 设置字段 className 可以给某一列指定一个样式。
单元格:通过给数据 data 设置字段 cellClassName 可以给任意一个单元格指定样式。
固定表头
通过设置属性 height 给表格指定高度后,会自动固定表头。当纵向内容过多时可以使用。
单选
通过设置属性 highlight-current-row,可以选中某一行。
当选择时,触发事件 @on-current-change,可以自定义操作,事件返回两个值 currentRow 和 oldCurrentRow,分别为当前行的数据和上一次选择的数据。
如果需要显示索引,可以增加一列 m-table-column,设置type属性为index即可显示从 1 开始的索引号
多选
选择多行数据时使用 Checkbox。传入数据列表每项需指定唯一id。
手动添加一个el-table-column,指定 type: 'selection',即可自动开启多选功能。