<template>
<div>
<el-tree
ref="tree"
:props="props"
:load="loadNode"
node-key="name"
:check-strictly="true"
lazy
show-checkbox
@check-change="handleCheckChange"
>
</el-tree>
</div>
</template>
<script>
export default {
data() {
return {
props: {
label: "name",
children: "zones",
},
count: 1,
selectTreeNum: 0, //选中的树单位
};
},
methods: {
handleCheckChange(data, checked, indeterminate) {
this.selectTreeNum++;
this.$nextTick(() => {
if (this.selectTreeNum % 2 === 0) {
// this.selectOrganizationId = ''
if (checked) {
this.$message.warning("只能选中一个章节");
this.$refs.tree.setCheckedNodes([]);
this.$refs.tree.setCheckedNodes([data.name]);
//交叉点击节点
} else {
this.$refs.tree.setCheckedNodes([]);
//点击已经选中的节点,置空
}
} else {
if (checked) {
// this.selectOrganizationId = data.organizationId
}
}
});
},
handleNodeClick(data) {
console.log(data);
},
loadNode(node, resolve) {
if (node.level === 0) {
return resolve([{ name: "region1" }, { name: "region2" }]);
}
if (node.level > 3) return resolve([]);
var hasChild;
if (node.data.name === "region1") {
hasChild = true;
} else if (node.data.name === "region2") {
hasChild = false;
} else {
hasChild = Math.random() > 0.5;
}
setTimeout(() => {
var data;
if (hasChild) {
data = [
{
name: "zone" + this.count++,
},
{
name: "zone" + this.count++,
},
];
} else {
data = [];
}
resolve(data);
}, 500);
},
},
};
</script>
<style scoped lang="less">
</style>