多级表格展开 vue

实现多级表格展开的方法有很多种，下面我介绍一种基于 Vue 的实现方法：

1. 首先，定义一个表格组件，并且在数据中添加一个 `children` 属性，用于存储子级数据。

2. 针对每一行数据，添加一个展开/收起的按钮，点击按钮时触发一个方法。

3. 在方法中，判断当前行数据是否有子级数据，如果有，则切换展开/收起状态，并且将子级数据合并到当前表格数据中。如果没有，则不做任何操作。

4. 在表格模板中，根据当前行数据的展开/收起状态，来决定是否显示子级表格。

下面是一个简单的示例代码：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Gender</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in tableData" :key="item.id">
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
          <td>{{ item.gender }}</td>
          <td>
            <button @click="toggleChildren(item)">
              {{ item.expanded ? 'Collapse' : 'Expand' }}
            </button>
          </td>
        </tr>
        <tr v-if="hasChildren" v-for="child in currentChildren" :key="child.id">
          <td>{{ child.name }}</td>
          <td>{{ child.age }}</td>
          <td>{{ child.gender }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          name: 'Alice',
          age: 20,
          gender: 'Female',
          expanded: false,
          children: [
            {
              id: 2,
              name: 'Bob',
              age: 25,
              gender: 'Male'
            },
            {
              id: 3,
              name: 'Charlie',
              age: 30,
              gender: 'Male'
            }
          ]
        },
        {
          id: 4,
          name: 'David',
          age: 35,
          gender: 'Male',
          expanded: false,
          children: [
            {
              id: 5,
              name: 'Eva',
              age: 40,
              gender: 'Female'
            },
            {
              id: 6,
              name: 'Frank',
              age: 45,
              gender: 'Male',
              expanded: false,
              children: [
                {
                  id: 7,
                  name: 'Grace',
                  age: 50,
                  gender: 'Female'
                }
              ]
            }
          ]
        }
      ]
    };
  },
  computed: {
    currentChildren() {
      return this.tableData.filter((item) => item.expanded).flatMap((item) => item.children);
    },
    hasChildren() {
      return this.currentChildren.length > 0;
    }
  },
  methods: {
    toggleChildren(item) {
      if (item.children) {
        item.expanded = !item.expanded;
        if (item.expanded) {
          this.tableData.splice(
            this.tableData.indexOf(item) + 1,
            0,
            ...item.children.map((child) => ({ ...child, level: item.level + 1 }))
          );
        } else {
          let index = this.tableData.indexOf(item);
          let count = 0;
          while (index < this.tableData.length && this.tableData[index].level > item.level) {
            this.tableData.splice(index, 1);
            count++;
          }
        }
      }
    }
  }
};
</script>

在上面的代码中，我们定义了一个表格组件，并且添加了一个 `toggleChildren` 方法，用于切换展开/收起状态。同时，我们使用 `computed` 属性来计算当前展开的子级数据，并在模板中使用 `v-if` 来控制子级表格的显示。