引入 elememt 的 tree 组件,实现以下效果:
1、树的懒加载
2、父子节点不相互关联
3、可勾选,而且必须是单选,即互斥
4、节点超出显示省略号,鼠标移上去显示全部
如图:
HTML代码:
<el-tree
:props="treeProps"
:load="loadNode"
lazy
show-checkbox
:check-strictly="true"
:default-checked-keys="checkedKeys"
node-key="id"
ref="tree"
highlight-current
@check="getCheckedNodes"
@check-change="getCurrentNode"
>
<template slot-scope="{ node, data }">
<div class="custom-tree-node">
<span class="node-title" :title="data.name">{{ data.name }}</span>
</div>
</template>
</el-tree>
初始化:
data() {
return {
treeProps: {
label: "name",
children: "zones",
isLeaf: "isleaf"
},
// 是否勾选了节点
checkedFlag: false,
// 被勾选节点的id
code: "",
checkedKeys: []
};
},
逻辑代码:
methods: {
// 获取已选的节点
getCheckedNodes(data, item) {
if (this.checkedFlag) {
// 通过 keys 设置目前勾选的节点
this.$refs.tree.setCheckedKeys([this.code]);
} else {
this.$refs.tree.setCheckedKeys([]);
}
},
// 获取当前被选择的节点
getCurrentNode(data, check) {
this.checkedFlag = check;
this.code = data.code;
},
// 懒加载树
loadNode(node, resolve) {
if (node.level === 0) {
// 如果展开第一级节点,从后台加载一级节点列表
this.loadFirstNode(resolve);
}
if (node.level >= 1) {
// 如果展开其他级节点,动态从后台加载下一级节点列表
this.loadChildNode(node, resolve);
}
},
// 加载第一级列表
async loadFirstNode(resolve) {
// 这里发送网络请求,获取后台返回的列表
const { data } = await listApi("0");
return resolve(data.list);
},
// 如果展开其他级节点,动态从后台加载下一级节点列表
async loadChildNode(node, resolve) {
let { level, code } = node.data;
// 这里发送网络请求,获取后台返回的列表
const { data } = await listApi(level, code);
return resolve(data.list);
}
}
样式:
.node-title {
display: inline-block;
width: 70%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-left: 6px;
}