一、整体思路
- 用render-content方法实现树节点的内容区的渲染,根据节点属性判断是否渲染内容区,若不显示,则删除该节点。
二、代码实现
<div id="tree">
<el-tree
ref="tree"
:data="treeData"
show-checkbox
node-key="id"
:default-checked-keys="checkedKeys"
default-expand-all
:expand-on-click-node="false"
@check="handleCheckChange"
:render-content="renderContent"
></el-tree>
</div>
// 根据number属性值判断是否渲染节点
renderContent(h, { node, data, store }) {
if(data.number!=0){
return(
<span class="custom-tree-node">
<span>{data.label +' ('+ number+')'}</span>
</span>
)
}else{
this.remove(node, data)
}
},
// 删除节点数据方法
remove(node, data) {
const parent = node.parent
const children = parent.data.children || parent.data
const index = children.findIndex(d => d.id === data.id)
children.splice(index, 1)
},