Table (opens new window)

用于展示多条结构类似的数据,可对数据进行排序、筛选、对比或其他自定义操作。

# 基础表格

基础的表格展示用法。

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事件来管理选中时触发的事件,它会传入currentRowoldCurrentRow。如果需要显示索引,可以增加一列el-table-column,设置type属性为index即可显示从 1 开始的索引号。

# 排序

对表格进行排序,可快速查找或对比数据。

在列中设置sortable属性即可实现以该列为基准的排序,接受一个Boolean,默认为false。可以通过 Table 的default-sort属性设置默认的排序列和排序顺序。可以使用sort-method或者sort-by使用自定义的排序规则。如果需要后端排序,需将sortable设置为custom,同时在 Table 上监听sort-change事件,在事件回调中可以获取当前排序的字段名和排序顺序,从而向接口请求排序后的表格数据。在本例中,我们还使用了formatter属性,它用于格式化指定列的值,接受一个Function,会传入两个参数:rowcolumn,可以根据自己的需求进行处理。

<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 相同。