Vue实现级联多选
Vue实现级联多选的方法
使用Element UI的Cascader组件
Element UI提供了Cascader组件，支持级联选择功能。通过配置props属性可以自定义节点字段名，结合checkStrictly属性实现多选。
<template>
<el-cascader
v-model="selectedOptions"
:options="options"
:props="{ multiple: true, checkStrictly: true }"
clearable
></el-cascader>
</template>
<script>
export default {
data() {
return {
selectedOptions: [],
options: [
{
value: 'guide',
label: 'Guide',
children: [
{ value: 'disciplines', label: 'Disciplines' },
{ value: 'navigation', label: 'Navigation' }
]
}
]
}
}
}
</script>自定义递归组件实现
通过递归组件可以灵活控制级联逻辑。定义子组件时通过v-for渲染子节点，利用v-model实现数据双向绑定。
<template>
<div>
<div v-for="item in options" :key="item.value">
<input
type="checkbox"
v-model="selectedValues"
:value="item.value"
>
{{ item.label }}
<cascade-node
v-if="item.children"
:options="item.children"
v-model="selectedValues"
/>
</div>
</div>
</template>
<script>
export default {
name: 'CascadeNode',
props: {
options: Array,
value: Array
},
computed: {
selectedValues: {
get() { return this.value },
set(val) { this.$emit('input', val) }
}
}
}
</script>使用第三方库vue-treeselect
vue-treeselect专为Vue设计，支持多选、异步加载等功能。安装后通过配置multiple和flat模式实现级联多选。
npm install @riophae/vue-treeselect<template>
<treeselect
v-model="value"
:multiple="true"
:options="options"
:flat="true"
/>
</template>
<script>
import Treeselect from '@riophae/vue-treeselect'
export default {
components: { Treeselect },
data() {
return {
value: [],
options: [
{
id: 'a',
label: 'a',
children: [
{ id: 'aa', label: 'aa' }
]
}
]
}
}
}
</script>注意事项
- 大数据量时建议使用异步加载
- 选中状态维护需考虑父子节点关联逻辑
- 移动端需注意交互体验优化
- 自定义样式时注意层级关系
以上方法可根据项目需求选择，Element UI适合快速集成，自定义组件灵活性更高，vue-treeselect提供丰富的扩展功能。
