el-tree实现单选(父节点可单选)
<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>
上一篇:
通过多线程提高代码的执行效率例子