hello 這幾天做了一個關於菜單權限的問題
剛開始涉及到半選的問題，后來由於功能性要求，網頁中顯示沒有半選狀態，全部都是全選
並且勾選父級，子級被全部勾選，取消父級，子級全部取消
下一級取消 上一級不取消
代碼如下：
<el-tree
class="filter-tree"
:expand-on-click-node="false"
check-strictly
show-checkbox
@check="authorityCheck"
:default-checked-keys="defaultCheck"
node-key="id"
empty-text="暫無數據"
:data="authorityData"
:props="defaultProps"
default-expand-all
:filter-node-method="filterNode"
ref="tree">
</el-tree>
script：
authorityCheck(currentNode, treeStatus) {
const setChildStatus = (node, status) => {
/* 這里的 id children 也可以是其它字段，根據實際的業務更改 */
this.$refs.tree.setChecked(node.id, status);
if (node.children) {
/* 循環遞歸處理子節點 */
for (let i = 0; i < node.children.length; i++) {
setChildStatus(node.children[i], status);
}
}
};
/* 設置父節點為選中狀態 */
const setParentStatus = (nodeObj) => {
/* 拿到tree組件中的node,使用該方法的原因是第一次傳入的 node 沒有 parent */
const node = this.$refs.tree.getNode(nodeObj);
if (node.parent.key) {
this.$refs.tree.setChecked(node.parent, true);
setParentStatus(node.parent);
}
};
/* 判斷當前點擊是選中還是取消選中操作 */
if (treeStatus.checkedKeys.includes(currentNode.id)) {
setParentStatus(currentNode);
setChildStatus(currentNode, true);
} else {
/* 取消選中 */
if (currentNode.children) {
setChildStatus(currentNode, false);
}
}
this.roles = [...this.$refs.tree.getCheckedKeys()];
},
authorityCheckSearch(currentNode, treeStatus) {
// this.rolesSearch = [];
const setChildStatus = (node, status) => {
/* 這里的 id children 也可以是其它字段，根據實際的業務更改 */
this.$refs.treeS.setChecked(node.id, status);
if (node.children) {
/* 循環遞歸處理子節點 */
for (let i = 0; i < node.children.length; i++) {
setChildStatus(node.children[i], status);
}
}
};
/* 設置父節點為選中狀態 */
const setParentStatus = (nodeObj) => {
/* 拿到tree組件中的node,使用該方法的原因是第一次傳入的 node 沒有 parent */
const node = this.$refs.treeS.getNode(nodeObj);
if (node.parent.key) {
this.$refs.treeS.setChecked(node.parent, true);
setParentStatus(node.parent);
}
};
/* 判斷當前點擊是選中還是取消選中操作 */
if (treeStatus.checkedKeys.includes(currentNode.id)) {
setParentStatus(currentNode);
setChildStatus(currentNode, true);
} else {
/* 取消選中 */
if (currentNode.children) {
setChildStatus(currentNode, false);
}
}
this.rolesSearch = [...this.$refs.treeS.getCheckedKeys()];
},
自己實操試試咯，有問題，聯系我哦