el-table表格不是树形表格结构 实现手风琴效果

在Vue.js的Element UI库中，`el-table`是一个用于展示数据列表的组件，但它本身并不直接支持树形结构的手风琴展开收起效果。如果你想实现类似的功能，你可以采取以下几个步骤：

1. **数据组织**：首先，你需要将数据组织成嵌套的对象数组，每个对象包含一个“children”属性表示下级节点。

[
  {
    title: '父节点1',
    children: [
      { title: '子节点1', isExpanded: false },
      { title: '子节点2', isExpanded: true }
    ]
  },
  { ... } // 其他父节点
]

2. **动态设置状态**：每个节点需要一个`isExpanded`属性来控制其是否展开，初始状态下设置为`false`。

3. **模板设计**：在`<el-table>`中，使用递归的方式渲染每个节点，并通过条件渲染来显示子节点。

<template>
  <el-table :data="treeData" @expand-change="handleExpandChange">
    <el-table-column type="expand">
      <template slot-scope="{ row }">
        <!-- 判断是否展开，如果展开则显示子节点 -->
        <el-tree :data="row.children" :default-expand-all="false" @node-click="handleNodeClick(row)">
          ...
        </el-tree>
      </template>
    </el-table-column>
    <el-table-column prop="title" label="标题" />
  </el-table>
</template>

4. **事件处理**：编写`handleExpandChange`和`handleNodeClick`方法来监听表头展开变化和节点点击，更新节点的状态。

methods: {
  handleExpandChange(row) {
    this.$set(row, 'isExpanded', !row.isExpanded);
  },
  handleNodeClick(row) {
    if (row.isExpanded) {
      this.handleExpandChange(row);
    }
  }
}

5. **样式调整**：可以自定义一些CSS来优化折叠和展开的效果。