element UI 中 el-tree 树形菜单新增、删除操作_elementui的tree增删改查

效果图：

 标签代码部分：

<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('执行删除操作！')
            })
        },
}

以上操作可以完成对某个节点的的操作，如：新增下级、删除当前节点等

纯属个人理解总结，希望对大家有所帮助！