vue2中实现treeTable进行多层级多选效果将选中的id返回一个数组

在Vue2中实现树状表格的多层级多选功能，通常会涉及到组件化设计、父子组件通信以及状态管理。以下是一个简单的步骤：

1. **数据结构**：首先，你需要维护一个多层的对象数组，每个节点包含`id`, `text` (显示文本) 和 `children` (子节点列表)，还有布尔属性如`isSelect`来表示是否被选中。

data() {
  return {
    treeData: [
      { id: 1, text: '父节点1', children: [] },
      // ...其他子节点
    ],
    selectedIds: [], // 存储被选择的节点id数组
  };
},

2. **组件模板**：在模板中，你可以使用递归的方式渲染树形表格，并添加复选框用于选择：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in treeData" :key="index">
        <input type="checkbox" v-model="item.isSelect" :value="item.id">
        <span>{{ item.text }}</span>
        <!-- 使用递归渲染子节点 -->
        <ul v-if="item.children.length">
          <li v-for="child in item.children" :key="child.id">
            <!-- 类似上面的处理，增加isSelect和值为child.id -->
          </li>
        </ul>
      </li>
    </ul>
    <button @click="getSelectedIds">获取选中的节点ID</button>
  </div>
</template>

3. **事件处理**：在模板的按钮点击事件上，触发获取选中项的动作。这里可以通过深度遍历数据结构，把所有选中的节点id收集到`selectedIds`数组中。

methods: {
  getSelectedIds() {
    this.selectedIds = [];
    this.getCheckedNodes(this.treeData);
  },
  getCheckedNodes(node) {
    node.isSelect && this.selectedIds.push(node.id);
    node.children.forEach(child => this.getCheckedNodes(child));
  }
}

4. **传递数据**：如果需要将这个数组传递给父组件或其他地方，可以使用props或者Vuex等状态管理工具。