用创新模式打开el-table展现形式：理解el-table中的expand模式

2023-09-15 05:32:06

el-table的expand模式：一种更加灵活的表格展现形式

el-table是Element UI中的一款表格组件，它提供了丰富的功能和高度的可定制性。其中，expand模式是其一个重要的特性，它允许用户在表格中展开特定行以显示更多信息。这种模式非常适用于需要在有限的空间内显示大量数据的场景，例如：

用户信息管理系统： 管理员可以在展开行中查看用户的详细资料，包括联系方式、地址、订单历史等。
商品展示页面： 用户可以在展开行中查看商品的详细信息，如产品说明、规格参数、用户评论等。
项目管理工具： 项目经理可以在展开行中查看项目的任务列表、进度、截止日期等。

el-table expand模式的基本用法

使用expand模式非常简单，只需在el-table组件的属性中设置expand-row-keys属性即可。该属性的值是一个数组，其中包含了需要展开的行索引。例如，要展开表格的第二行和第四行，可以设置expand-row-keys为：[2, 4]。

<el-table :data="tableData" expand-row-keys="expandedRows">
  <el-table-column prop="name" label="姓名" width="180"></el-table-column>
  <el-table-column prop="age" label="年龄" width="100"></el-table-column>
  <el-table-column prop="address" label="地址" width="200"></el-table-column>
  <el-table-column>
    <template slot-scope="scope">
      <el-button @click="handleExpandClick(scope.$index, scope.row)">展开</el-button>
    </template>
  </el-table-column>
</el-table>

data() {
  return {
    tableData: [
      {
        name: '张三',
        age: 20,
        address: '北京市海淀区'
      },
      {
        name: '李四',
        age: 22,
        address: '上海市黄浦区'
      },
      {
        name: '王五',
        age: 25,
        address: '广州市天河区'
      }
    ],
    expandedRows: []
  }
},
methods: {
  handleExpandClick(index, row) {
    this.expandedRows = [index]
  }
}