vue实现树形全选

Vue 实现树形全选功能

实现树形结构的全选功能需要处理父子节点的联动逻辑，包括全选、反选以及部分选中状态。以下是基于 Vue 的实现方法。

数据结构设计

树形结构通常使用嵌套数组表示，每个节点包含以下属性：

• id: 节点唯一标识
• label: 节点显示文本
• checked: 是否选中
• children: 子节点数组

示例数据结构：

treeData: [
  {
    id: 1,
    label: '父节点1',
    checked: false,
    children: [
      {
        id: 2,
        label: '子节点1',
        checked: false
      },
      {
        id: 3,
        label: '子节点2',
        checked: false
      }
    ]
  }
]

全选逻辑实现

1. 全选/取消全选顶层节点 遍历所有节点并设置 checked 状态：

   toggleSelectAll(isSelectAll) {
     const traverse = (nodes) => {
       nodes.forEach(node => {
         node.checked = isSelectAll;
         if (node.children) traverse(node.children);
       });
     };
     traverse(this.treeData);
   }

2. 处理父节点与子节点联动 当子节点状态变化时，更新父节点状态：

   updateParentChecked(node) {
     if (!node.parent) return;
     const allChildrenChecked = node.parent.children.every(child => child.checked);
     const someChildrenChecked = node.parent.children.some(child => child.checked);
     node.parent.checked = allChildrenChecked;
     node.parent.indeterminate = someChildrenChecked && !allChildrenChecked;
     this.updateParentChecked(node.parent);
   }

3. 处理子节点与父节点联动 当父节点状态变化时，更新所有子节点状态：

   updateChildrenChecked(node) {
     if (node.children) {
       node.children.forEach(child => {
         child.checked = node.checked;
         this.updateChildrenChecked(child);
       });
     }
   }

组件模板示例

<template>
  <div>
    <button @click="toggleSelectAll(true)">全选</button>
    <button @click="toggleSelectAll(false)">取消全选</button>
    <ul>
      <tree-node
        v-for="node in treeData"
        :key="node.id"
        :node="node"
        @toggle="handleToggle"
      />
    </ul>
  </div>
</template>

树节点组件实现

Vue.component('tree-node', {
  props: ['node'],
  template: `
    <li>
      <input
        type="checkbox"
        :checked="node.checked"
        @change="toggleChecked"
      />
      {{ node.label }}
      <ul v-if="node.children">
        <tree-node
          v-for="child in node.children"
          :key="child.id"
          :node="child"
          @toggle="$emit('toggle', $event)"
        />
      </ul>
    </li>
  `,
  methods: {
    toggleChecked() {
      this.node.checked = !this.node.checked;
      this.$emit('toggle', this.node);
    }
  }
});

状态管理优化

对于大型树形结构，建议使用 Vuex 管理状态：

1. 将树形数据存储在 Vuex state 中
2. 通过 mutations 更新选中状态
3. 使用 getters 计算部分选中状态

性能优化建议

1. 对大型树结构使用虚拟滚动
2. 使用 v-once 静态节点优化
3. 避免深度监听整个树结构
4. 考虑使用扁平化数据结构配合 parentId 引用

以上实现提供了完整的树形全选功能，包括父子节点联动、全选/取消全选操作，以及部分选中状态显示。根据实际需求可以进一步扩展功能，如异步加载节点、多选操作等。