当前位置：首页 > VUE

vue实现多级多选框

2026-01-20 06:51:54VUE

Vue 实现多级多选框的方法

多级多选框通常用于树形结构数据的交互选择，例如部门选择、权限分配等场景。以下是基于 Vue 的实现方案：

递归组件实现树形多选框

使用递归组件可以优雅地处理无限层级的多选框结构。

<template>
  <div>
    <tree-checkbox 
      v-model="selectedNodes" 
      :nodes="treeData" 
    />
  </div>
</template>

<script>
export default {
  components: {
    TreeCheckbox: {
      name: 'TreeCheckbox',
      props: {
        nodes: Array,
        value: Array
      },
      template: `
        <ul>
          <li v-for="node in nodes" :key="node.id">
            <label>
              <input 
                type="checkbox" 
                :value="node.id" 
                v-model="value"
                @change="handleChange(node)"
              />
              {{ node.name }}
            </label>
            <tree-checkbox 
              v-if="node.children && node.children.length" 
              :nodes="node.children" 
              v-model="value"
            />
          </li>
        </ul>
      `,
      methods: {
        handleChange(node) {
          this.toggleChildren(node, this.value.includes(node.id))
        },
        toggleChildren(node, checked) {
          if (node.children) {
            node.children.forEach(child => {
              const index = this.value.indexOf(child.id)
              if (checked && index === -1) {
                this.value.push(child.id)
              } else if (!checked && index !== -1) {
                this.value.splice(index, 1)
              }
              this.toggleChildren(child, checked)
            })
          }
        }
      }
    }
  },
  data() {
    return {
      selectedNodes: [],
      treeData: [
        {
          id: 1,
          name: 'Level 1',
          children: [
            {
              id: 2,
              name: 'Level 2',
              children: [
                { id: 3, name: 'Level 3' }
              ]
            }
          ]
        }
      ]
    }
  }
}
</script>

使用第三方组件库

对于更复杂的需求，可以考虑使用成熟的UI组件库：

Element UI 的树形控件：

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

Ant Design Vue 的树选择：

<a-tree-select
v-model="value"
show-checkbox
tree-data-simple-mode
:tree-data="treeData"
style="width: 100%"
/>

自定义全选/半选状态

实现类似文件管理器的选择状态（全选/半选）：

computed: {
  checkedStatus() {
    const checkedCount = this.children.filter(child => child.checked).length
    if (checkedCount === 0) return false
    if (checkedCount === this.children.length) return true
    return 'indeterminate'
  }
}

数据扁平化处理

对于大数据量，建议使用扁平化数据结构优化性能：

methods: {
  flattenNodes(nodes, flatList = []) {
    nodes.forEach(node => {
      flatList.push(node)
      if (node.children) {
        this.flattenNodes(node.children, flatList)
      }
    })
    return flatList
  }
}