vue级联实现多选
Vue级联多选实现方法
使用Element UI的Cascader组件
Element UI的Cascader组件支持多选功能，通过设置props.multiple为true即可启用。
安装Element UI：
npm install element-ui引入组件并配置：
<template>
<el-cascader
v-model="selectedOptions"
:options="options"
:props="props"
clearable
></el-cascader>
</template>
<script>
export default {
data() {
return {
selectedOptions: [],
props: {
multiple: true,
label: 'label',
value: 'value',
children: 'children'
},
options: [{
value: 'guide',
label: 'Guide',
children: [{
value: 'disciplines',
label: 'Disciplines'
}]
}]
}
}
}
</script>使用Ant Design Vue的Cascader
Ant Design Vue的Cascader组件同样支持多选，需要设置multiple属性。
安装Ant Design Vue：
npm install ant-design-vue组件使用示例：
<template>
<a-cascader
v-model:value="value"
:options="options"
multiple
placeholder="Please select"
/>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const value = ref([]);
const options = [
{
value: 'zhejiang',
label: 'Zhejiang',
children: [
{
value: 'hangzhou',
label: 'Hangzhou',
}
]
}
];
return {
value,
options
};
}
};
</script>自定义实现级联多选
如果需要高度定制化的级联多选，可以结合多个select组件或tree组件自行实现。
基础结构示例：
<template>
<div>
<select v-model="selectedProvince" @change="loadCities">
<option v-for="province in provinces" :value="province.id">
{{ province.name }}
</option>
</select>
<select v-model="selectedCities" multiple>
<option v-for="city in cities" :value="city.id">
{{ city.name }}
</option>
</select>
</div>
</template>
<script>
export default {
data() {
return {
selectedProvince: null,
selectedCities: [],
provinces: [],
cities: []
}
},
methods: {
loadCities() {
// 根据selectedProvince加载对应的城市数据
}
}
}
</script>注意事项
级联多选组件的数据结构通常需要嵌套格式，确保每个节点包含label、value和children属性。
多选时返回的值通常是数组形式，包含所有选中节点的value值。某些组件可能支持返回完整节点对象。
对于大型数据集，考虑使用懒加载方式动态加载子节点数据，以优化性能。
清除已选项的功能通常通过组件的clearable属性控制，部分UI库可能需要手动实现清除逻辑。
