Vue+element ui 可编辑树结构

程序员不易，且干且珍惜！

后管项目中，树形图是我们经常用到的一个组件，很多还要求用户可以编辑，增删改查子级。原来一直都是着急忙慌的写上该功能，现在终于有时间整理一下了。

其实，百度上有很多该功能的实现方法，提供给我们开发过程中借鉴，我也尝试过不同的写法，有的效果不佳，有的已经不能用了，本篇文章，是我总结后的自认为比较好用的，我以后遇到此类的需求就可以直接用，在这里，也算是记录一下：

1，实现效果和逻辑

效果：树结构未操作时，所有层级展开，操作按钮隐藏；鼠标移入某层级，该层级显示要求的操作按钮，比如：最后一层级不可添加，其他层级可以增删改。

逻辑：实现树结构可以编辑主要思想就是 - 树结构开启可自定义模式，操作某一层级的时候显示不同的内容（其实也就是不同的操作按钮和输入框），在我们操作结束时，将更改数据存入后端，完成增删改功能，树结构刷新。

2，效果图

未编辑状态                                                              编辑状态：

 

 3，实现代码

<template>
<div class="type-tree">
/
*
*typeData: 树结构数据
*defaultProps：树结构层级配置项
*default-expand-all：默认展开所有层级
*:expand-on-click-node="false"：关闭层级默认点击方法（点击收缩展开层级）
*@node-click="handleNodeClick"：自定义层级点击方法
*slot-scope="{ node, data }"：开启层级内容自定模式
*@mouseenter="mouseenter(data)"：鼠标移入某层级方法：改变数据的del变量值，控制操作图标显示
*@mouseleave="mouseleave(data)"：鼠标移入某层级方法：改变数据的del变量值，控制操作图标隐藏
*
/
    <el-tree 
    :data="typeData" 
    :props="defaultProps" 
    node-key="id"
    default-expand-all
    :expand-on-click-node="false"
    @node-click="handleNodeClick">
        <div slot-scope="{ node, data }" @mouseenter="mouseenter(data)" @mouseleave="mouseleave(data)" style="width: 100%;">
            <div>
                <!-- 不可编辑情况 -->
                <span v-if="data.id != operationVis" class="custom-tree-node">