Vue实现级联多选
Vue实现级联多选的方法
使用Element UI的Cascader组件
Element UI提供了el-cascader组件，支持多选功能。通过设置props属性中的multiple为true即可启用多选。
<template>
<el-cascader
v-model="selectedOptions"
:options="options"
:props="{ multiple: true }"
clearable
/>
</template>
<script>
export default {
data() {
return {
selectedOptions: [],
options: [
{
value: 'guide',
label: 'Guide',
children: [
{
value: 'disciplines',
label: 'Disciplines',
children: [
{ value: 'consistency', label: 'Consistency' }
]
}
]
}
]
}
}
}
</script>自定义级联多选组件
如果需要更灵活的控制，可以基于el-select和el-tree自定义级联多选组件。通过组合这两个组件，实现多级选择功能。
<template>
<el-select
v-model="selectedValues"
multiple
collapse-tags
placeholder="请选择"
>
<el-option :value="treeDataRef">
<el-tree
ref="tree"
:data="treeData"
show-checkbox
node-key="id"
:props="defaultProps"
@check-change="handleCheckChange"
/>
</el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
selectedValues: [],
treeData: [
{
id: 1,
label: '一级 1',
children: [
{ id: 4, label: '二级 1-1' }
]
}
],
defaultProps: {
children: 'children',
label: 'label'
}
}
},
methods: {
handleCheckChange(data, checked, indeterminate) {
this.selectedValues = this.$refs.tree.getCheckedNodes()
}
}
}
</script>使用第三方库vue-treeselect
vue-treeselect是一个专门用于树形选择和多选的Vue组件，支持级联多选功能。
安装依赖：
npm install @riophae/vue-treeselect使用示例：
<template>
<treeselect
v-model="value"
:multiple="true"
:options="options"
/>
</template>
<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
components: { Treeselect },
data() {
return {
value: null,
options: [
{
id: 'a',
label: 'a',
children: [
{ id: 'aa', label: 'aa' }
]
}
]
}
}
}
</script>注意事项
- 数据结构需要符合组件要求，通常包含
value/label和children字段 - 多选时注意性能问题，大数据量情况下建议使用虚拟滚动
- 清除选择时可能需要手动处理，特别是自定义组件时
- 移动端适配可能需要额外样式调整
以上方法可以根据项目需求和技术栈选择合适的实现方案。Element UI方案适合快速集成，自定义组件灵活性更高，而vue-treeselect提供了更专业的树形选择功能。
