el-table折叠列

`el-table` 是 Element UI 提供的一个用于展示表格的组件，在 Vue.js 中非常常用。如果需要创建一个支持折叠列的功能，Element UI 提供了 `el-table-column` 的 `type` 属性，其中可以设置为 `expand` 来实现展开/折叠的效果。

例如，你可以这样做：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="age" label="年龄" width="180">
      <template slot-scope="scope">
        <span v-if="scope.row.showDetail">详细信息</span>
        <el-collapse v-model="scope.row.expanded" @change="handleExpandChange(scope.$index)">
          <p>这是展开的内容...</p>
        </el-collapse>
      </template>
    </el-table-column>
    <!-- ...其他列... -->
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 20, showDetail: true, expanded: false },
        // ...
      ],
      handleExpandChange(index) {
        this.tableData[index].expanded = !this.tableData[index].expanded;
      }
    };
  }
};
</script>

在这个例子中，每个单元格中的内容被包裹在一个 `el-collapse` 组件中，当行被点击时，`expanded` 数据属性会被改变，控制折叠面板的显示状态。`handleExpandChange` 函数会在状态变化时被调用，更新表格数据的状态。