vue 树形 表格 支持展开收缩

是的，Vue树形表格可以支持展开收缩。具体实现方式如下：

1. 在表格数据中添加一个“children”字段，用来存储每个节点下的子节点数据。
2. 在表格列中添加一个“展开/收缩”列，用来显示当前节点的展开/收缩状态，并提供展开/收缩操作。
3. 使用“v-if”指令来根据节点的展开/收缩状态来决定是否显示子节点数据。
4. 在展开/收缩操作中，对节点的“展开/收缩”状态进行切换，并根据状态来判断是否加载子节点数据。

下面是一个简单的Vue树形表格展开收缩示例：

<template>
  <div>
    <el-table :data="tableData" border>
      <el-table-column type="expand">
        <template slot-scope="props">
          <div v-if="props.row.children">
            <el-table :data="props.row.children">
              <el-table-column prop="name" label="Name"></el-table-column>
              <el-table-column prop="age" label="Age"></el-table-column>
              <el-table-column prop="address" label="Address"></el-table-column>
            </el-table>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="Name"></el-table-column>
      <el-table-column prop="age" label="Age"></el-table-column>
      <el-table-column prop="address" label="Address"></el-table-column>
      <el-table-column label="Operation">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleExpand(scope.row)">Expand</el-button>
          <el-button size="mini" @click="handleCollapse(scope.row)">Collapse</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: 'John',
          age: 18,
          address: 'New York',
          children: [
            {
              name: 'Jack',
              age: 20,
              address: 'Los Angeles'
            },
            {
              name: 'Mary',
              age: 22,
              address: 'Chicago'
            }
          ]
        },
        {
          name: 'Tom',
          age: 25,
          address: 'San Francisco'
        }
      ]
    };
  },
  methods: {
    handleExpand(row) {
      if (row.children) {
        row._expanded = true;
      }
    },
    handleCollapse(row) {
      if (row.children) {
        row._expanded = false;
      }
    }
  }
};
</script>

在上面的示例中，我们使用了“v-if”指令来根据节点的展开/收缩状态来决定是否显示子节点数据，使用“_expanded”字段来记录每个节点的展开/收缩状态，使用“handleExpand”和“handleCollapse”方法来切换节点的展开/收缩状态。