element-ui级联选择器为多选(multiple:true,emitPath:false,checkStrictly:false)
核心在于值改变后,检查全选子集,push对应上级菜单
选中
返回
<div class="block">
<el-cascader
:options="options"
:props="props"
@change="cascaderChange"
v-model="cascaderData"
clearable></el-cascader>
</div>
<script>
export default {
data() {
return {
cascaderData:[],
props: { multiple:true,emitPath:false,checkStrictly:false },
options: [{
value: '1',
label: '东南',
children: [{
value: '2',
label: '上海',
children: [
{ value: '3', label: '普陀' },
{ value: '4', label: '黄埔' },
{ value: '5', label: '徐汇' }
]
}, {
value: '7',
label: '江苏',
children: [
{ value: '8', label: '南京' },
{ value: '9', label: '苏州' },
{ value: '10', label: '无锡' }
]
}, {
value: '12',
label: '浙江',
children: [
{ value: '13', label: '杭州' },
{ value: '14', label: '宁波' },
{ value: '15', label: '嘉兴' }
]
}]
}, {
value: '17',
label: '西北',
children: [{
value: '18',
label: '陕西',
children: [
{ value: '19', label: '西安' },
{ value: '20', label: '延安' }
]
}, {
value: '21',
label: '新疆维吾尔自治区',
children: [
{ value: '22', label: '乌鲁木齐' },
{ value: '23', label: '克拉玛依' }
]
}]
}]
};
},
methods: {
cascaderChange(val){
if (val && val.length > 0) {
//赋值
let ob = {};
//recursive处理ob数据源
//参数1:ob 接收处理后的数据
//参数2:this.options el-cascader 选择数据源
//参数3:'value' 值键名
//参数4:'children' 子集键名
//参数5:null
//参数6:null
this.recursive(ob,this.options,'value','children',null,null)
//检测赋值
if(ob&&JSON.stringify(ob)!="{}"){
for (const key in ob) {
let len = 0
for(let j = 0 ; j < val.length ; j++){
if(ob[key].includes(val[j])){
len ++
}
}
if(ob[key].length===len){
this.cascaderData.push(key)
}
}
}
}
},
// element Cascader 级联选择器 数据处理
recursive(object,data,valueKey,subsetKey,last,lastData){
if(last){
object[last] = [];
}
if(data&&data.length>0){
for(let i = 0 ; i < data.length ; i++){
if(last&&!data[i][subsetKey]){
object[last].push(data[i][valueKey])
}
if(lastData&&!data[i][subsetKey]){
lastData.push(data[i][valueKey])
}
if(data[i][subsetKey]&&data[i][subsetKey].length>0){
this.recursive(object,data[i][subsetKey],valueKey,subsetKey,data[i][valueKey],object[last])
}
}
}
},
}
};
</script>