elementui 表格嵌套折叠面板

可以使用 ElementUI 的表格组件（`el-table`）和折叠面板组件（`el-collapse`）结合起来实现表格嵌套折叠面板的效果。

具体实现步骤如下：

1. 在表格中添加一个自定义列，用于显示折叠面板。

<el-table-column label="详情">
  <template slot-scope="scope">
    <el-collapse v-model="expandedRows">
      <el-collapse-item>
        <!-- 折叠面板内容 -->
      </el-collapse-item>
    </el-collapse>
  </template>
</el-table-column>

在上面的示例代码中，`expandedRows` 是一个数组，用于存储展开的行的索引。

2. 在表格的 `row-click` 事件中处理展开和折叠的逻辑。

<el-table @row-click="handleRowClick" :row-style="{cursor: 'pointer'}">
  <!-- 表格列 -->
</el-table>

data() {
  return {
    expandedRows: [] // 记录展开的行的索引
  };
},
methods: {
  handleRowClick(row, event, column) {
    // 判断当前行是否展开
    const index = this.expandedRows.indexOf(row.$index);
    if (index === -1) {
      // 如果未展开，则将该行的索引加入到 expandedRows 数组中
      this.expandedRows.push(row.$index);
    } else {
      // 如果已展开，则将该行的索引从 expandedRows 数组中删除
      this.expandedRows.splice(index, 1);
    }
  }
}

在上面的示例代码中，通过判断当前行的索引是否在 `expandedRows` 数组中来确定该行是否展开。

完整示例代码如下：

<template>
  <div>
    <el-table @row-click="handleRowClick" :row-style="{cursor: 'pointer'}">
      <el-table-column label="名称" prop="name"></el-table-column>
      <el-table-column label="分类" prop="category"></el-table-column>
      <el-table-column label="详情">
        <template slot-scope="scope">
          <el-collapse v-model="expandedRows">
            <el-collapse-item>
              <p>价格：{{ scope.row.price }}</p>
              <p>描述：{{ scope.row.description }}</p>
            </el-collapse-item>
          </el-collapse>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      expandedRows: [] // 记录展开的行的索引
    };
  },
  methods: {
    handleRowClick(row, event, column) {
      // 判断当前行是否展开
      const index = this.expandedRows.indexOf(row.$index);
      if (index === -1) {
        // 如果未展开，则将该行的索引加入到 expandedRows 数组中
        this.expandedRows.push(row.$index);
      } else {
        // 如果已展开，则将该行的索引从 expandedRows 数组中删除
        this.expandedRows.splice(index, 1);
      }
    }
  }
};
</script>