代码:
html部分:
<el-tree ref = "instTree" :props = "props" :load = "loadNode" node-key = "instId" check-strictly lazy show-checkbox class = "inst_tree" @check-change = "handleCheckedChanged" @node-click="handleNodeClick">
</el-tree>
script部分:
data() { props: {label: 'listName', children: 'children', isLeaf: 'leaf'}, checkedData: {} }
//children属性的具体作用尚未可知,有人将children定义为数组即children: [], 也同样有效,请注意el-tree结构中的数据都需要含有leaf属性,leaf : Boolean, 用于判断是否叶子节点,为叶子节点则不再解析下一次数据,否则需要进一步解析。
methods: {
//此函数用于设置选项框仅可单选
handleCheckedChanged(data, checked, node) {
if (checked === true) {
this.checkedData = data;
this.$refs['instTree'].setCheckedKeys([data.instId]);
} else {
if (this.checkedData.instId === data.instId) {
this.$refs['instTree'].setCheckedKeys([data.instId]);
}
}
},
//实现点击文本选择该项,不一定需要点击正方形小选框;
handleNodeClick(data){
if (data.leaf){
this.checkedData = data;
this.$refs['instTree'].setCheckedKeys([data.instId]);
}
}
//下面的函数都用于设置懒加载
loadNode(node, resolve) {
if (node.level ===0) {
this.requestTree(resolve); //如果是一级节点,解析最上层的数据
} else {
this.getSon(node, resolve) //否则运行getSon函数解析下一层的数据
}
},
getSon (node, resolve) {
if (node.leaf) {
resolve([]) //叶子节点就不再递归,终止解析数据
} else {
//非叶子节点就需要进一步递归获取并解析数据
//发送ajax请求向后端请求数据resData;resData需要转化为数组格式
resolve(resData);
}
},
requestTree(resolve) {
//如果el-tree的一级为死数据; reslove([死数据]);注意resolve()函数里面需要解析数组格式的数据,否则无法解析,前端页面显示“无数据”
//如果一级为从后端获取的动态数据,发送ajax请求,获取resData,将其转换为数组格式;
resolve(resData);
}
Css部分: 将非叶子节点的正方形小选框隐藏
.inst_tree {
.el-tree-node {
.is-leaf + .el-checkbox .el-checkbox__inner {
display: inline-block;
}
.el-checkbox__input .el-checkbox__inner {
display: none;
}
}
}