<template>
<div class="treeBody">
<el-tree
:data="data"
:props="defaultProps"
node-key="f_EnCode"
:check-strictly="true"
show-checkbox
default-expand-all
ref="tree"
highlight-current
@check-change="handleNodeClicks"
:default-checked-keys="defKeys"
></el-tree>
</div>
</template>
<script>
export default {
data() {
return {
defaultProps: {
children: "children",
label: "f_FullName"
},
data: [],
// 选择的id
id: "",
// 选中单选
checkedId: "",
defKeys: [],
name: ""
};
},
created() {
// 选中回填
if (this.$route.query.idNum) {
this.defKeys[0] = this.$route.query.idNum;
}
},
mounted() {
this.getData();
},
methods: {
setCheckedKeys() {
this.$refs.tree.setCheckedKeys([3]);
},
resetChecked() {
this.$refs.tree.setCheckedKeys([]);
},
handleNodeClicks(item, node, self) {
if (node === true) {
this.checkedId = item.f_EnCode;
this.name = item.f_TreeName;
this.id = this.checkedId;
this.$refs.tree.setCheckedKeys([item.f_EnCode]);
} else {
if (this.checkedId == item.f_EnCode) {
this.$refs.tree.setCheckedKeys([item.f_EnCode]);
}
}
},
// 通过递归的形式,获取角色下所有三级权限的id,并保存到 defKeys 数组中
getLeafKeys(node) {
// 如果当前 node 节点不包含 children 属性,则是三级节点
if (!node.children.length == 0) {
// 除了最后一级所有节点disabled为true
node.disabled = true;
}
node.children.forEach(item => this.getLeafKeys(item));
},
getData() {
var projectTree = JSON.parse(localStorage.getItem("projectTree"));
this.data = projectTree;
var arr = this.data;
arr.map(item => {
this.getLeafKeys(item);
});
}
}
};
</script>
<style lang="less" scope>
</style>
ElementUI中el-tree节点 实现多级只能选择最低级
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。