业务场景：同级仅支持两个多选，若同级出现两个多选，其他层级不支持选择，此时按钮禁用，若用户在同一级选择了一个，此时可以选择下面部门
<template>
<div id="app">
<div class="app-container">
<div class="block">
<span class="demonstration">多选选择任意一级选项</span>
<el-cascader ref="cascader" v-model="tags" :options="tempList" :props="optionsProps" clearable @change="test"></el-cascader>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
tags: [],
optionsProps: {
disabled: "disabled", // 禁用属性
label: "orgName",
value: "orgCode",
children: "children",
multiple: true,
checkStrictly: true,
expandTrigger: "click",
selectMax: 2,
},
lock: -1,
// 这里模拟的数据
tempList: [
// 宁波银行
{
orgCode: "1",
orgName: "宁波银行",
level: "1", // 等级标识
orgId: "1",
children: [
{
orgCode: "925",
orgName: "上海分行",
level: "2",
orgId: "925",
children: [
{
orgCode: "07002",
orgName: "上海分行信用卡中心",
level: "3",
orgId: "S3505",
children: [
{
orgName: "上海分行信用卡中心--总经理",
orgCode: "07002",
level: "4",
orgId: "D13794",
},
{
orgName: "上海分行信用卡中心--总经理",
orgCode: "07003",
level: "4",
orgId: "D1379411",
},
],
},
{
orgCode: "070021",
orgName: "上海分行信用卡中心",
level: "3",
orgId: "S35051",
children: [
{
orgName: "上海分行信用卡中心--总经理1",
orgCode: "07004",
level: "4",
orgId: "D137941",
},
{
orgName: "上海分行信用卡中心--总经理",
orgCode: "07005",
level: "4",
orgId: "D1379416",
},
],
},
],
},
{
orgCode: "07100",
orgName: "杭州分行",
level: "2",
orgId: "3",
children: [
{
orgCode: "V07166",
orgName: "杭州分行信用卡中心",
level: "3",
orgId: "V38",
children: [
{
orgCode: "3310003401",
orgName: "杭州分行信用卡中心--总经理",
level: "4",
orgId: "D13778",
},
],
},
],
},
{
orgCode: "07200",
orgName: "南京分行",
level: "2",
orgId: "4",
children: [
{
orgCode: "07202",
orgName: "南京分行信用卡中心",
level: "3",
orgId: "S3450",
children: [],
},
],
},
],
},
],
};
},
methods: {
test() {
// 组件可能是异步的
this.$nextTick(() => {
const a = this.$refs.cascader.checkedNodes.map((item) => +item.level);
const map = {};
a.forEach((item) => {
if (map[item]) {
map[item]++;
} else {
map[item] = 1;
}
});
console.log(map, 9999);
const arr = Object.keys(map)
.map((item) => +item)
.sort((a, b) => a - b);
for (let i = 0; i < arr.length; i++) {
const level = arr[i];
if (map[level] === this.optionsProps.selectMax) {
this.eachData(
this.findLevel(this.tempList, level),
this.optionsProps.disabled,
true,
level
);
this.lock = level;
} else if (
map[level] < this.optionsProps.selectMax &&
level === this.lock
) {
this.eachData(
this.findLevel(this.tempList, level),
this.optionsProps.disabled,
false,
level
);
}
}
});
},
findLevel(data, level) {
// console.log(data, level);
const res = [];
for (let i = 0; i < data.length; i++) {
const item = data[i];
if (item[this.optionsProps.children]) {
res.push(...this.findLevel(item[this.optionsProps.children], level));
}
if (+item.level === +level) {
res.push(item);
}
}
return res;
},
eachData(data, key, value, level) {
// console.log("2222", data, key, value, level);
for (let i = 0; i < data.length; i++) {
const item = data[i];
if (+item.level !== +level) {
if (item[key]) {
item[key] = value;
} else {
this.$set(item, key, value);
}
}
if (item[this.optionsProps.children]) {
this.eachData(item[this.optionsProps.children], key, value);
}
}
},
},
};
</script>
<style lang="less"></style>
