element ui 表格实现某列折叠

Element UI 提供了一个名为 "ElTable" 的表格组件，它内置了丰富的功能，包括列展开和折叠。为了实现在某一列上展开和折叠的功能，你可以使用 `show-header` 属性和自定义的 `render` 函数。

首先，在 `el-table-column` 中设置 `show-header` 为 `false`，表示默认隐藏该列的内容，然后添加一个点击事件监听器来切换列的状态。这里是一个简单的例子：

<template>
  <el-table :data="tableData">
    <el-table-column prop="name" label="姓名" show-header></el-table-column>
    <!-- 使用 render 函数定义展开/折叠列 -->
    <el-table-column v-if="isExpandColumn" width="50" align="center">
      <template slot-scope="scope">
        <i class="el-icon-arrow-right" @click="toggleExpandColumn(scope.$index)"></i>
      </template>
    </el-table-column>

    <el-table-column prop="expandContent" v-model="expandedRowsKeys" show-header="true" type="expand">
      <template slot="expanded">
        <div v-for="(item, index) in expandedItems" :key="index">
          {{ item.expandContent }}
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        // ... 表格数据
      ],
      isExpandColumn: false,
      expandedRowsKeys: [],
      expandedItems: []
    };
  },
  methods: {
    toggleExpandColumn(index) {
      this.isExpandColumn = !this.isExpandColumn;
      if (this.isExpandColumn) {
        const item = this.tableData[index];
        if (!this.expandedItems.includes(item)) {
          this.expandedItems.push(item);
          this.expandedRowsKeys.push(index); // 更新已展开行的索引
        }
      } else {
        const keyIndex = this.expandedRowsKeys.indexOf(index);
        if (~keyIndex) {
          this.expandedItems.splice(keyIndex, 1);
          this.expandedRowsKeys.splice(keyIndex, 1);
        }
      }
    }
  }
};
</script>

在这个例子中，我们有一个标志 `isExpandColumn` 来控制展开列是否显示，当点击展开图标时，我们会切换这个标志并更新 `expandedRowsKeys` 和 `expandedItems` 数组，从而动态地展示或隐藏展开内容。