效果图是这个样子的
基础的数据就不说了,看官方文档就可以,专门写一下怎么把父元素的可选框取消。
就是找到父元素,把它的可选框用display取消,让子元素的可选框dispaly设置成inline-block就行,要是样式没变化用样式穿透就行。
<el-tree
ref="tree"
show-filter
:data="data"
:props="treeProps"
show-checkbox
:border="false"
:width="200"
class="tree "
:render-content="renderContent"
>
</el-tree>
.tree{
border: none !important;
::v-deep label{
display: none;
}
::v-deep .gp-v21-tree-node__children{
label{
display: inline-block;
}
.is-leaf{
display: none;
}
}
}
第二个是两个图标的渲染,是通过渲染函数
renderContent(h, { node, data, store }) {
console.log("渲染函数走了")
if (node.childNodes.length === 0 && node.label!=='代销机构') {
return (
<div class="custom-tree-node">
<span>{node.label}</span>
<span class='ml'>
<i class="el-icon-edit" on-click={ () => this.edit(node,data) }></i>
</span>
<span class='ml'>
<i class="el-icon-delete" on-click={ () => this.openDialoag(node,data) }></i>
</span>
</div>
)
} else {
return (
<span class="custom-tree">
<span>{node.label}</span>
</span>
)
}
},
node.childNodes.length=0的时候就是最底层的节点,还可以通过node.label 来判断