当选中父节点下其中一个子节点时,把父节点和子节点都存储到库中做顶部菜单展示,回显时使用以下方法进行半选展示。
<el-tree
ref="menuTree"
:data="treeData"
:default-checked-keys="checkedKeys"
:check-strictly="false"
:props="defaultProps"
:filter-node-method="filterNode"
class="filter-tree"
node-key="id"
highlight-current
show-checkbox
/>
选中方法:
updatePermession() {
this.menuIds = "";
this.menuIds = this.$refs.menuTree.getCheckedKeys().join(',').concat(',').concat(this.$refs.menuTree.getHalfCheckedKeys().join(','))//全选半选都存到库中
// this.menuIds = this.$refs.menuTree
// .getCheckedKeys()
// .join(",")
// .concat(",");
console.log("菜单");
console.log(this.menuIds);
this.scopdata = this.$refs.dataTree.getCheckedKeys();
permissionUpd(this.$route.query.roleId, this.menuIds, this.scopdata).then(
() => {
this.newSuccess();
}
);
},
fetchRoleTree获取到库中存的父节点id和子节点的id,回显方法
fetchRoleTree(this.$route.query.roleId).then(res => {
console.log(res.data + "eeeeeee");
//this.checkedKeys = res.data;
res.data.forEach((i,n) => {
var node=this.$refs.menuTree.getNode(i);
if(node.isLeaf){
this.$refs.menuTree.setChecked(node, true);//是否设置子节点,默认为false,利用tree组件渲染后带有的isLeaf(是否为叶子节点)属性,如果为叶子节点就选中。利用tree的API就实现了正确的回显效果
}
})
});
参考:https://blog.csdn.net/xudalin/article/details/103158941