elementui的tree的详细使 节点的删除与增加与编辑实现刷新当前树

 <el-tree
        style="width:20%;padding-left: 14px;"
        :props="defaultProps"//配置
        
        :data="treedata"  //数据来源
        ref="tree"
        highlight-current //选中的高亮节点样式
        :load="loadNode"
        draggable
        :allow-drop="allowDrop"  //拖拽
        @node-drop="sort"
        accordion
        :expand-on-click-node="true"
        @node-contextmenu="rightClick"
        @node-click="handleNodeClick"
        @node-expand="handleNodeClick"
      >
      //这下面试鼠标移上去的效果  类似hover  内容过长的显示  v-if是判断节点的等级 如果每一个都显示的话去掉就可以的
        <template class="custom-tree-node" slot-scope="{data,node}">
          <span v-if="node.level===4" class="sapnellipsis">
            <el-tooltip
              class="item"
              effect="dark"
              :content="data.dictionaryText"
              placement="top-start"
            >
              <span>{{data.dictionaryText}}</span>
            </el-tooltip>
          </span>
          <span v-else>{{data.dictionaryText}}</span>
        </template>
      </el-tree>

return {
//配置相关
  defaultProps: {
        children: "children",
        label: "Text", //根据后台返回的字段去修改
        isLeaf: "leaf",
      },
}

//拖拽的方法  （仅仅在同一级允许拖拽）
 allowDrop(draggingNode, dropNode, type) {
      var res =
        draggingNode.level === 4 && //判断是否在第四层下
        draggingNode.level === dropNode.level && //判断是否在同一级
        (type === "prev" || type === "next") &&
        draggingNode.parent.key === dropNode.parent.key;
      return res;
    },

    sort(draggingNode, dropNode, type, event) {
      let obj = {
        aboveId: "",
        arr: [],
      };
      // obj.aboveId = dropNode.data.dictionaryId;
      for (let item of dropNode.parent.childNodes) {
        obj.arr.push(item.data.dictionaryId);
      }

      for (var i = 0; i < obj.arr.length; i++) {
        obj.aboveId += obj.arr[i] + ",";
      }
      if (obj.aboveId.length > 0) {
        obj.aboveId = obj.aboveId.substr(0, obj.aboveId.length - 1);
      }
      this.updateOrderMe(obj);//调用接口方法
    },

updateOrderMe（）｛

｝

//鼠标右键的增删改  html——+  方法  这里就只写新增了  起他删改都一样的意思  只是调用接口不一样
 <div
        v-show="addmenuVisible" //显示鸡儿影藏不做多解释
        @mouseleave="addmenuVisible=!addmenuVisible"
        class="dev-type-main-left"
      >
        <ul id="addmenu" class="addright-menu">
          <li
            tabindex="-1"
            class="menu-item"
            id="menu-4994-1-2"
            v-auth="['modular-add']"
            @click="() =>treeaddmodule(nodeData)"
          >
            <el-link icon="el-icon-circle-plus-outline" :underline="false">新增</el-link>
          </li>
        </ul>
      </div>


//方法
这里只是点击去让相对应的增改删啥的弹框去显示出来而已  把nodedata  赋值给新定义的一个treedata  return里面新增一个空就好了
treeaddmodule（nodeData）｛
this.treedata    =nodedata    //是为了操作完后刷新父节点
｝


//再把相对于的增改的接口成功后调用方法  handleNodeClick这个是请求整个树的数据的接口  
            this.handleNodeClick(
                        self.addtreedata.parent.data,
                        self.addtreedata.parent
                      );