Renderings:
Label code part:
<el-tree
class="tree-css"
:data="treeList"
:props="defaultProps"
:highlight-current="highlightShow"
node-key="hierarchyCode"
ref="tree"
default-expand-all
:current-node-key="currentKey"
:expand-on-click-node="false"
:default-expanded-keys="treeSelectList"
@node-click="handleNodeClick">
<span class="custom-tree-node" slot-scope="{ node, data }">
<span class="label-text" :title="node.label">{
{ node.label }}</span>
<span style="z-index: 100;">
<el-button type="text" size="mini" @click.stop="append(data)">新增</el-button>
<el-button type="text" size="mini" @click.stop="remove(node, data)">删除</el-button>
</span>
</span>
</el-tree>
How-to section:
methods:{
// 点击某个树形节点,获取节点信息
handleNodeClick(data) {
console.log(data)
},
// 树形菜单新增
append(data) {
console.log('执行新增操作!')
},
// 树形菜单删除
remove(node,data) {
this.$confirm('此操作将删除该节点, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
console.log('执行删除操作!')
})
},
}
The above operations can complete the operation of a node, such as: add a subordinate, delete the current node, etc.
It is purely a summary of personal understanding, and I hope it will be helpful to everyone!