element-ui tree结构实现增删改自定义功能代码

首先是页面部分

下面是js部分

export default {
 props:['treeDataObj','isUserMgt'],//父级传值 与判断哪个tree
 data () {
  return {
   treedata:[],//tree数据
   expandedKey:[],//展开节点
   checkedID:''//选中节点
  }
 },
 mounted(){
  this.treeData=this.treeDataObj.treeData
  let userMtree=document.getElementById('userMtree')
  this.$nextTick(()=>{
   userMtree.firstElementChild.classList.add("is-current");//添加选中类名
  })
  this.checkedID=this.treeData[0].id//默认选中第一个
 },
 methods:{
//编辑
  nodeEdit(ev, store, data) {
   data.isEdit = true;
   this.$nextTick(() => {//得到input
    const $input =
     ev.target.parentNode.parentNode.querySelector("input") ||
     ev.target.parentElement.parentElement.querySelector("input");
 
    !$input ? "" : $input.focus();//获取焦点
   });
  },
//失焦事件
  edit_sure(ev, data) {
   const $input =
    ev.target.parentNode.parentNode.querySelector("input") ||
    ev.target.parentElement.parentElement.querySelector("input");
   if (!$input) {
    return false;
   } else if($input.value==''){
    this.$message({
     type: "info",
     message: "内容不能为空!"
    });
   }else{//赋值value
    data.label = $input.value;
    data.isEdit = false;
   }
  },
//react方法 插入代码
  renderContent(h, { node, data, store }) {
   return (
    
     {this.showOrEdit(data)}
     
       this.nodeEdit(ev, store, data)}/>
       this.nodeDelete(node, data)}/>
      {
this.isUserMgt? this.append( data)}>:'' 
      }
     
    
   );
  },
  showOrEdit(data) {
   if (data.isEdit) {
    return (
      this.edit_sure(ev, data)} />
    );
   } else {
    return {data.label};
   }
  },
//新增节点
  append(data) {
   const newChild = { id: new Date().getTime(), label: '', children: [],
      isEdit: true };
//判断是否有子节点
   if (!data.children) {
    this.$set(data, 'children', []);
   }
   data.children.push(newChild);
   this.expandedKey=[data]//展开点击节点
  },
//移除节点
  nodeDelete(node, data) {
   const parent = node.parent
   const children = parent.data.children || parent.data
   const index = children.findIndex(d => d.id === data.id)
   children.splice(index, 1)
  },
//点击节点 移除默认选中节点
  nodeClick(data){
   let userMtree=document.getElementById('userMtree')
   userMtree.firstElementChild.classList.remove("is-current");
   this.checkedID=data.id
   console.log(data)
   this.$emit('emitClickNode',data)
  }
 }
}

.span-ellipsis {
 width: 100%;
 overflow: hidden;
 margin-left: 10px;
 white-space: nowrap;
 text-overflow: ellipsis;
}

import tree from '@/components/Tree/index'
export default {
 components: { tree },
 data() {}
 ......

handleRightSelect(key) {
 if (key === '1') {
  this.$emit('NodeQuery', this.TREEDATA)
  this.menuVisible = false
 } else if (key === '2') {
  this.$emit('NodeAdd', this.TREEDATA)
  this.menuVisible = false
 } else if (key === '3') {
  this.$emit('NodeUpdate', this.TREEDATA)
  this.menuVisible = false
 } else if (key === '4') {
  this.$emit('NodeDel', this.TREEDATA)
  this.menuVisible = false
 }
}