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)
    }
  }
}