el-table 列展开

`el-table` 是 Element UI 中的一个表格组件，它支持列的展开功能，也就是所谓的“行展开”（Row Expansion）。这种设计通常用于需要展示详细信息的场景，用户点击某一列的特定单元格时，会弹出一个新的面板，显示该行的额外数据。在 `el-table` 中，你可以通过设置每个单元格内的 `expand-icon` 属性，以及给表格配置 `row-expand` 或 `expander` 方法来启用这一特性。

例如：

<template>
  <el-table :data="tableData" @expand="handleExpand">
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="age" label="年龄" width="180"></el-table-column>
    <!-- 添加展开列 -->
    <el-table-column type="expand" label="更多">
      <template slot-scope="scope">
        <p>详细信息：{{ scope.row.detail }}</p>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 24, detail: '这是张三的详细信息' },
        // 其他数据...
      ],
      expandedRowsKeys: [] // 存储展开行的键
    };
  },
  methods: {
    handleExpand(row) {
      if (this.expandedRowsKeys.includes(row.$key)) {
        this.expandedRowsKeys.splice(this.expandedRowsKeys.indexOf(row.$key), 1);
      } else {
        this.expandedRowsKeys.push(row.$key);
      }
    }
  }
};
</script>

在这个例子中，当用户点击某一行的 "更多" 标签时，`handleExpand` 方法会被调用，控制展开或折叠行。展开的行信息存储在 `expandedRowsKeys` 数组中。