vue实现多级多选框
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
}
}注意事项
- 深层级树结构应考虑使用虚拟滚动优化性能
- 大数据量时建议添加懒加载功能
- 选中状态变化时需要同时更新父节点和子节点状态
- 考虑添加搜索过滤功能提升用户体验
以上方案可根据实际需求组合使用，递归组件适合自定义程度高的场景，而UI组件库能快速实现标准功能。
