element-plus的 tree组件
- 先去掉父子节点关联关系
:check-strictly="true"
- 自己定义方法
@check-change="handleCheckChange"
贴部分代码,主要就是下面三个方法
const menuTree = ref([]);
const menuRef = ref();
const isRendering = ref(false);
const checkAllChildren = (node, checked) => {
if (node.children) {
node.children.forEach(child => {
menuRef.value.setChecked(child.id, checked, false);
checkAllChildren(child, checked);
});
}
};
const findParent = (id, nodes) => {
for (let node of nodes) {
if (node.children) {
for (let child of node.children) {
if (child.id === id) {
return node;
}
const parent = findParent(id, node.children);
if (parent) {
return parent;
}
}
}
}
return null;
};
/**
*
* @param node 传递给 data 属性的数组中该节点所对应的对象
* @param checked 节点本身是否被选中
*/
const handleCheckChange = (node, checked) => {
if (isRendering.value) {
return;
}
if (checked === false) {
// 子节点,取消选中
checkAllChildren(node, false);
} else {
//否则(为选中状态)
// 子节点,选中
checkAllChildren(node, true);
// 若有父节点,选中
isRendering.value = true;
let parent = findParent(node.id, menuTree.value);
while (parent) {
menuRef.value.setChecked(parent.id, true, false);
parent = findParent(parent.id, menuTree.value);
}
nextTick(() => {
isRendering.value = false;
});
}
};
<el-tree
ref="menuRef"
:data="menuTree"
:default-checked-keys="checkedKeys"
:filter-node-method="filterNode"
default-expand-all
node-key="id"
show-checkbox
:check-strictly="true"
@check-change="handleCheckChange"
/>
主要代码就在上面啦,不想写备注了