ElementUI 树形组件 el-tree 节点增删改实现

前言

要实现的效果：

鼠标移入显示增删改按钮，根节点只允许新增。

一、代码如下

<div>
          <el-tree
            :data="natureOptions"
            :props="defaultProps"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            node-key="id"
            ref="tree"
            default-expand-all
            @node-click="handleNodeClick"
          >
            <span class="custom-tree-node show-hide" slot-scope="{ node, data }">
                <span>{{ node.label }}</span>
                <span style="display:none">
                    <i @click="() => appendNode(node, data)" class="el-icon-plus" title="增加"></i><!--增加节点-->
                    <!-- 根节点不需要删除和修改 -->
                    <i v-if="data.id !== 1" @click="() => removeNode(node,data)" class="el-icon-delete" title="删除"></i><!--删除节点-->
                    <i v-if="data.id !== 1" @click="() => editNode(node,data)" class="el-icon-edit" title="编辑"></i><!--编辑节点-->
                </span>
            </span>
          </el-tree>
        </div>

.custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 8px;
    }

  .show-hide:hover :nth-child(2) {
      display: inline-block !important;
    }

然后就是实现这几个增删改的方法：

// 新增树节点
    appendNode(node, data) {
      this.resetNodeForm();
      this.nodeForm.parentId = data.id;
      getNatureTreeNode().then(response =>{
        if(response.code === 200){
          this.nodeTitle = "添加节点";
          this.parentTreeName = data.label;
          this.dialogNodeFormVisible = true;
        }
      });
    },
    // 删除树节点
    removeNode(node, data) {
      // 判断该节点是否有子节点
      if(node.childNodes.length != 0){
        this.$message({
          message: '该节点下存在子节点，不允许直接删除',
          type: 'warning'
        });
        return;
      }
      this.$confirm("是否确认删除此节点?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return delNatureTreeNode(data.id);
        })
        .then(response => {
          if (response.code === 200){
            this.getTreeselect();
            this.msgSuccess("删除成功");
          } else {
            this.$message({
              message: response.msg,
              type: 'warning'
            });
            return;
          }
        })
        .catch(function () {});
    },
    // 编辑树节点
    editNode(node, data) {
      this.resetNodeForm();
      getNatureTreeNode(data.id).then(response =>{
        if(response.code === 200){
          this.nodeForm = response.data;
          this.nodeTitle = "编辑节点";
          this.parentTreeName = node.parent.label;
          this.dialogNodeFormVisible = true;
        }
      });
    }