效果图:
标签代码部分:
<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>
操作方法部分:
methods:{
// 点击某个树形节点,获取节点信息
handleNodeClick(data) {
console.log(data)
},
// 树形菜单新增
append(data) {
console.log('执行新增操作!')
},
// 树形菜单删除
remove(node,data) {
this.$confirm('此操作将删除该节点, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
console.log('执行删除操作!')
})
},
}
以上操作可以完成对某个节点的的操作,如:新增下级、删除当前节点等
纯属个人理解总结,希望对大家有所帮助!