全局样式:
.el-tree-node__expand-icon.is-leaf {
display:none;
}
data:
defaultProps: {
children: "child", // 节点是否拥有子节点
label: "orgName", // 节点渲染时的显示的名字
value: "orgCode",
isLeaf: (data, node) => {
if (data.storeType === 1) { // 实体门店 叶子结点 不展示icon
return true
}
}
}, // 判断显示节点icon
treeData: [], // 树数据
html:
<el-tree class="filter-tree" lazy :load="loadNode" :data="treeData" node-key="id" :props="defaultProps" highlight-current :filter-node-method="filterNode" ref="tree" @node-click="handleNodeClick">
<div class="custom-tree-node " slot-scope="{ node }">
<div>
<span style="margin-right: 10px">{{ node.label }}</span>
<el-tag v-if="node.data.storeType === 1" size="mini" type="success">门店</el-tag>
</div>
</div>
</el-tree>
methods:
// 监听节点的展开事件并进行懒加载
async loadNode(node, resolve) {
// 一级节点处理
if (node.level === 0) {
this.treeData = await OrganizateTree(1); // 首次加载一级节点数据函数
resolve(this.treeData);
}
// 其余节点处理
if (node.level >= 1) {
const res = await OrganizateTree(node.data.orgCode); // 获取该节点下的字节点
resolve(res);
}
},
网友评论