用于展示多条结构类似的数据,可对数据进行排序、筛选、对比或其他自定义操作。
# 基础表格
基础的表格展示用法。
当el-table
元素中注入data
对象数组后,在el-table-column
中用prop
属性来对应对象中的键名即可填入数据,用label
属性来定义表格的列名。可以使用width
属性来定义列宽。
# 带斑马纹表格
使用带斑马纹的表格,可以更容易区分出不同行的数据。
stripe
属性可以创建带斑马纹的表格。它接受一个Boolean
,默认为false
,设置为true
即为启用。
# 带边框表格
默认情况下,Table 组件是不具有竖直方向的边框的,如果需要,可以使用border
属性,它接受一个Boolean
,设置为true
即可启用。
# 多级表头
数据结构比较复杂的时候,可使用多级表头来展现数据的层次关系。
只需要在 el-table-column 里面嵌套 el-table-column,就可以实现多级表头。
# 单选
选择单行数据时使用色块表示。
Table 组件提供了单选的支持,只需要配置highlight-current-row
属性即可实现单选。之后由current-change
事件来管理选中时触发的事件,它会传入currentRow
,oldCurrentRow
。如果需要显示索引,可以增加一列el-table-column
,设置type
属性为index
即可显示从 1 开始的索引号。
# 排序
对表格进行排序,可快速查找或对比数据。
在列中设置sortable
属性即可实现以该列为基准的排序,接受一个Boolean
,默认为false
。可以通过 Table 的default-sort
属性设置默认的排序列和排序顺序。可以使用sort-method
或者sort-by
使用自定义的排序规则。如果需要后端排序,需将sortable
设置为custom
,同时在 Table 上监听sort-change
事件,在事件回调中可以获取当前排序的字段名和排序顺序,从而向接口请求排序后的表格数据。在本例中,我们还使用了formatter
属性,它用于格式化指定列的值,接受一个Function
,会传入两个参数:row
和column
,可以根据自己的需求进行处理。
<el-table-column
prop="date"
label="日期"
sortable
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
sortable
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址"
:formatter="formatter">
</el-table-column>
# 展开行
当行内容过多并且不想显示横向滚动条时,可以使用 Table 展开行功能。
通过设置 type="expand" 和 Scoped slot
可以开启展开行功能,el-table-column
的模板会被渲染成为展开行的内容,展开行可访问的属性与使用自定义列模板时的 Scoped slot
相同。
← Transfer 穿梭框 Tag 标签 →