当前位置：首页 > VUE

vue实现树形全选

2026-01-19 09:41:35VUE

Vue 实现树形全选功能

树形全选功能通常用于多级嵌套的树形结构中，允许用户一键选中所有节点或根据父节点状态自动更新子节点状态。以下是实现方法：

数据结构设计

树形结构数据通常采用嵌套格式，每个节点包含 id、label、children 和 checked 属性：

treeData: [
  {
    id: 1,
    label: 'Parent 1',
    checked: false,
    children: [
      {
        id: 2,
        label: 'Child 1-1',
        checked: false
      }
    ]
  }
]

全选/取消全选方法

添加全选按钮触发的方法，递归遍历所有节点：

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

父子节点联动逻辑

当父节点状态变化时，自动更新所有子节点状态：

methods: {
  handleParentChange(node) {
    const updateChildren = (nodes, isChecked) => {
      nodes.forEach(child => {
        child.checked = isChecked;
        if (child.children) {
          updateChildren(child.children, isChecked);
        }
      });
    };
    updateChildren(node.children, node.checked);
  }
}

子节点状态影响父节点

当子节点状态变化时，检查父节点是否需要更新：

methods: {
  handleChildChange(parentNode) {
    const allChecked = parentNode.children.every(child => child.checked);
    const someChecked = parentNode.children.some(child => child.checked);

    parentNode.checked = allChecked 
      ? true 
      : someChecked 
        ? 'indeterminate' 
        : false;
  }
}

模板渲染示例

使用递归组件渲染树形结构：

<template>
  <div>
    <button @click="toggleSelectAll(true)">全选</button>
    <button @click="toggleSelectAll(false)">取消全选</button>

    <ul>
      <tree-node 
        v-for="node in treeData" 
        :node="node" 
        :key="node.id"
        @change="handleChange"
      />
    </ul>
  </div>
</template>

TreeNode 组件实现

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

状态持久化

如果需要保存选中状态，可以添加获取所有选中节点的方法：

methods: {
  getSelectedNodes() {
    const selected = [];
    const traverse = (nodes) => {
      nodes.forEach(node => {
        if (node.checked && !node.children) {
          selected.push(node.id);
        }
        if (node.children) {
          traverse(node.children);
        }
      });
    };
    traverse(this.treeData);
    return selected;
  }
}