当前位置：首页 > VUE

vue实现树形多选框

2026-02-22 10:51:26VUE

实现树形多选框的方法

在Vue中实现树形多选框可以使用现成的组件库或自行开发。以下是两种常见方法：

使用Element UI的Tree组件

Element UI提供了带有复选框的Tree组件，适合快速实现树形多选框功能。

安装Element UI：

npm install element-ui

基本实现代码：

<template>
  <el-tree
    :data="treeData"
    show-checkbox
    node-key="id"
    :props="defaultProps"
    @check-change="handleCheckChange">
  </el-tree>
</template>

<script>
export default {
  data() {
    return {
      treeData: [{
        id: 1,
        label: '一级节点',
        children: [{
          id: 2,
          label: '二级节点',
          children: [{
            id: 3,
            label: '三级节点'
          }]
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  methods: {
    handleCheckChange(data, checked, indeterminate) {
      console.log(data, checked, indeterminate)
    }
  }
}
</script>

自定义递归组件实现

如果需要更灵活的控制，可以创建递归组件：

<template>
  <div class="tree-checkbox">
    <div v-for="node in treeData" :key="node.id">
      <label>
        <input 
          type="checkbox" 
          v-model="node.checked"
          @change="handleChange(node)">
        {{ node.label }}
      </label>
      <tree-checkbox 
        v-if="node.children && node.children.length"
        :treeData="node.children"
        @change="handleChildChange">
      </tree-checkbox>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TreeCheckbox',
  props: {
    treeData: Array
  },
  methods: {
    handleChange(node) {
      this.$emit('change', node)
    },
    handleChildChange(childNode) {
      this.$emit('change', childNode)
    }
  }
}
</script>

父子节点联动逻辑

实现父子节点联动的常见方法：

methods: {
  updateParentStatus(node) {
    if (!node.parent) return
    const allChecked = node.parent.children.every(child => child.checked)
    const someChecked = node.parent.children.some(child => child.checked)

    node.parent.checked = allChecked
    node.parent.indeterminate = !allChecked && someChecked

    this.updateParentStatus(node.parent)
  },

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

获取选中节点

获取所有选中节点的方法示例：

getCheckedNodes(treeData) {
  let checkedNodes = []
  treeData.forEach(node => {
    if (node.checked) checkedNodes.push(node)
    if (node.children) {
      checkedNodes = checkedNodes.concat(this.getCheckedNodes(node.children))
    }
  })
  return checkedNodes
}

样式优化建议

为树形多选框添加基本样式：

vue实现树形多选框

.tree-checkbox {
  padding-left: 20px;
}

.tree-checkbox label {
  display: flex;
  align-items: center;
  padding: 5px 0;
  cursor: pointer;
}

.tree-checkbox input[type="checkbox"] {
  margin-right: 8px;
}