vue el-table 树形 表格 按钮 展开收缩

您可以通过以下步骤在 Vue el-table 中添加树形表格按钮展开收缩功能：

1. 在 el-table 的 columns 中添加一个 slot，用于渲染展开/收缩按钮。

<el-table :data="tableData" :tree-props="{children: 'children'}">
  <el-table-column label="姓名" prop="name"></el-table-column>
  <el-table-column label="年龄" prop="age"></el-table-column>
  <el-table-column label="操作">
    <template slot-scope="{row}">
      <el-button v-if="row.children" @click="toggleExpand(row)">
        {{ row.expanded ? '收起' : '展开' }}
      </el-button>
    </template>
  </el-table-column>
</el-table>

2. 在 el-table 的 props 中设置 tree-props 属性，指定树形表格的子节点属性名为 'children'。

3. 在 Vue 实例中添加 toggleExpand 方法，用于展开/收缩树形表格节点。

methods: {
  toggleExpand(row) {
    this.$refs.table.toggleRowExpansion(row);
  }
}

4. 在 el-table 上添加 ref 属性，以便在 toggleExpand 方法中使用 $refs.table 获取 el-table 实例。

完整代码示例：

<template>
  <el-table :data="tableData" :tree-props="{children: 'children'}" ref="table">
    <el-table-column label="姓名" prop="name"></el-table-column>
    <el-table-column label="年龄" prop="age"></el-table-column>
    <el-table-column label="操作">
      <template slot-scope="{row}">
        <el-button v-if="row.children" @click="toggleExpand(row)">
          {{ row.expanded ? '收起' : '展开' }}
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: '张三',
          age: 18,
          children: [
            {
              name: '李四',
              age: 20,
              children: [
                {
                  name: '王五',
                  age: 22
                }
              ]
            }
          ]
        },
        {
          name: '赵六',
          age: 25
        }
      ]
    };
  },
  methods: {
    toggleExpand(row) {
      this.$refs.table.toggleRowExpansion(row);
    }
  }
};
</script>