需求就是只能同时多选同一层级的,比如上面 122
和 1222
是一层的,可以同时选,但是不能选择 从1111
,如果要选择只能清空了,选择第二层的,需求大概就是这样,不知道你听懂了没?我反正当时没听到哈哈哈
核心思路就是给层级树添加个 level
属性,再设置一个全局 level 变量来保存,在选择 change 事件的时候进行判断和控制。
这里要注意你是不是需要全选同层的,就是选了第二层,全选,就只能选第二层
代码可以参考下面的,省略了很多,看懂核心代码部分自己改改就行:
这里一定要用 check 事件,check-change 事件 v-model=“checkUnitIdList” 的值还没有改变。
<el-tree-select
class="demo-form-inline"
style="margin-bottom: 0"
v-model="checkUnitIdList"
:data="unitList"
:props="props"
multiple
:render-after-expand="false"
show-checkbox
check-strictly
filterable
collapse-tags
collapse-tags-tooltip
value-key="unitId"
ref="treeSelectRef"
@check="treeCheckChange"
/>
初始要添加层级和设置全局 level
const checkLevel = ref(0);
onMounted(() => {
getUnitTree().then((res: any) => {
unitList.value = res.data;
// 添加层级属性
addLevel(unitList.value, 1);
// 默认全选第一层
checkLevel.value = 1;
checkAll.value = true;
handleCheckAllChange();
});
});
const addLevel = (tree: any, level: number) => {
tree.forEach((item: any) => {
item.level = level;
if (item.children) {
addLevel(item.children, level + 1);
}
});
};
// 核心:check事件函数
const treeCheckChange = (node: any) => {
// 这里是为了清空的时候,初始设置
if (checkLevel.value === 0) {
checkLevel.value = node.level;
}
if (checkLevel.value !== node.level) {
ElMessage.warning('非同层级单位,请重新选择');
checkUnitIdList.value = checkUnitIdList.value.filter(
(i: any) => i !== node.unitId,
);
}
};
// 下面是清空、全选的,注意清空要设置初始
const handleCheckAll = () => {
checkAll.value = true;
checkLevel.value = checkLevel.value === 0 ? 1 : checkLevel.value;
handleCheckAllChange();
};
const handleClearkAll = () => {
checkAll.value = false;
checkLevel.value = 0;
handleCheckAllChange();
};
// 这里要注意你是不是需要全选同层的
const checkAllList = ref<string[]>([]);
const handleCheckAllChange = () => {
if (!treeSelectRef.value) return;
if (checkAll.value) {
// 全选当前同级的
checkAllList.value = [];
getLevel(unitList.value);
treeSelectRef.value.setCheckedNodes(checkAllList.value, true);
checkUnitIdList.value = checkAllList.value;
} else {
checkLevel.value = 0;
treeSelectRef.value.setCheckedNodes([]);
checkUnitIdList.value = [];
}
};
const getLevel = (tree: any) => {
tree.forEach((item: any) => {
if (item.level === checkLevel.value) {
checkAllList.value.push(item.unitId);
}
if (item.children) {
getLevel(item.children);
}
});
};