vue级联实现多选
Vue级联多选实现方法
使用el-cascader组件实现多选功能需要结合Element UI的特定配置。以下为具体实现步骤：
安装Element UI
确保项目中已安装Element UI库，可通过npm或yarn安装：
npm install element-ui引入组件
在Vue文件中引入el-cascader及样式：
import { ElCascader } from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';基础多选配置
通过props设置multiple属性启用多选，并配置级联数据：
<el-cascader
v-model="selectedOptions"
:options="options"
:props="{
multiple: true,
checkStrictly: true // 允许选择任意一级
}"
clearable
></el-cascader>数据格式要求
级联数据需为嵌套结构，例如：
options: [
{
value: 'shanghai',
label: '上海',
children: [
{
value: 'pudong',
label: '浦东新区'
}
]
}
]获取选中值
通过v-model绑定的selectedOptions会以数组形式存储多选结果，例如：
selectedOptions: [
['shanghai', 'pudong'],
['beijing', 'chaoyang']
]自定义节点样式
可通过scoped slot自定义节点显示：
<el-cascader :options="options">
<template slot-scope="{ node, data }">
<span>{{ data.label }}</span>
<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
</template>
</el-cascader>动态加载数据
对于大数据量场景，可使用lazy模式：
props: {
lazy: true,
lazyLoad(node, resolve) {
// 异步加载数据
setTimeout(() => {
resolve([{ value: 1, label: '动态数据' }]);
}, 500);
}
}注意事项
- 多选时建议启用
checkStrictly以允许非叶子节点选择 - 大数据量建议配合
filterable启用搜索功能 - 选中值处理时需注意多维数组的结构解析
完整示例可参考Element UI官方文档的Cascader多选部分。
