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

补充知识：vue前端基础之组件封装（树组件的封装附带增删改查方法）

组件封装的意义

组件封装的意义其实很好理解，对于一段复用性极高的代码，就需要进行组件封装以减少冗余代码。

树的封装

对于组件的引用

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

组件的使用

setTree是要给树赋予的值，treeName是树的标题（可不要），后面是需要的树的右键操作我启用了增删改

效果图

子组件向父组件传值

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

以上这篇element-ui tree结构实现增删改自定义功能代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。