使用ElementUI Tree树形控件中属性:render-content指定渲染函数renderContent,该函数返回需要的节点区内容
renderContent (h, { node, data, store }) {
if (node.isLeaf) {
return (
<span
class="custom-tree-node"
id={node.id}
on-mouseover={() => this.nodeOver(node, data)}
on-mouseout={() => this.nodeOut(node, data)}
style={this.typeNumber === data.id ? 'color: #00a0ff !important' : ''}>
<span>{node.label}</span>
<span class="btn-custom">
<el-tooltip class="item" effect="dark" content="编辑" placement="top-start">
<el-button size="medium"
icon="el-icon-edit"
type="text"
on-click={() => this.getDicType(node, data, store)}>
</el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="删除" placement="top-start">
<el-button size="medium"
icon="el-icon-delete"
type="text"
on-click={() => this.removeDicType(node, data)}>
</el-button>
</el-tooltip>
</span>
</span>)
} else {
return (
<span
class="custom-tree-node"
id={node.id}
on-mouseover={() => this.nodeOver(node, data)}
on-mouseout={() => this.nodeOut(node, data)}
style={this.activeIndex === data.id ? 'color: #00a0ff !important' : ''}>
<span>{node.label}</span>
<span class="btn-custom">
<el-tooltip class="item" effect="dark" content="添加" placement="top-start">
<el-button size="medium"
icon="el-icon-plus"
type="text"
on-click={() => this.openAddDicType(node, data, store)}>
</el-button>
</el-tooltip>
</span>
</span>)
}
}