首先是頁面部分

<template>
 <el-tree
  id="userMtree"
  ref="tree"
  :data="treeData"
  node-key="id"
  :render-content="renderContent"
  :expand-on-click-node="false"
  @node-click="nodeClick"
  :default-expanded-keys='expandedKey'
 ></el-tree>
</template>

下面是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 (
    <span class="custom-tree-node">
     <span class="tree_node_label">{this.showOrEdit(data)}</span>
     <div class="tree_node_op">
      <i class="el-icon-edit" on-click={ev => this.nodeEdit(ev,data)}/>
      <i class="el-icon-remove-outline" 
      on-click={() => this.nodeDelete(node,data)}/>
      {
       this.isUserMgt?<i class="el-icon-circle-plus-outline" 
        on-click={() => this.append( data)}></i>:''        
      }
     </div>
    </span>
   );
  },showOrEdit(data) {
   if (data.isEdit) {
    return (
     <input type="text" class="node_labe" value={data.label} 
      on-blur={ev => this.edit_sure(ev,data)} />
    );
   } else {
    return <span class="node_labe">{data.label}</span>;
   }
  },//新增節點
  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前端基礎之元件封裝（樹元件的封裝附帶增刪改查方法）

元件封裝的意義

元件封裝的意義其實很好理解，對於一段複用性極高的程式碼，就需要進行元件封裝以減少冗餘程式碼。

樹的封裝

<template>
 <el-aside width="180px">
  <h3 class="el-icon-folder" style="margin: 0px">
   {{ name }}
  </h3>
  <el-tree
   ref="tree"
   :data="setTree"
   :props="defaultProps"
   node-key="id"
   style="margin-top:20px"
   accordion
   @node-contextmenu="rihgtClick"
  >
   <span slot-scope="{ node,data }" class="span-ellipsis">
    <span v-show="!node.isEdit">
     <span v-show="data.children && data.children.length >= 1">
      <span :title="node.label">{{ node.label }}</span>
     </span>
     <span v-show="!data.children || data.children.length == 0">
      <span :title="node.label"> {{ node.label }}</span>
     </span>
    </span>
   </span>
  </el-tree>
  <!--滑鼠右鍵點擊出現頁面-->
  <div v-show="menuVisible">
   <el-menu
    id="rightClickMenu"
    class="el-menu-vertical"
    text-color="#000000"
    active-text-color="#000000"
    @select="handleRightSelect"
   >
    <el-menu-item index="1" :hidden="showQuery" class="menuItem">
     <span slot="title">查詢</span>
    </el-menu-item>
    <el-menu-item index="2" :hidden="showSave" class="menuItem">
     <span slot="title">新增</span>
    </el-menu-item>
    <el-menu-item index="3" :hidden="showUpdate" class="menuItem">
     <span slot="title">修改</span>
    </el-menu-item>
    <el-menu-item index="4" :hidden="showDelete" class="menuItem">
     <span slot="title">刪除</span>
    </el-menu-item>
   </el-menu>
  </div>
 </el-aside>
</template>
<script>
export default {
 name: 'Tree',props: {
  treeData: {
   type: Array,required: true
  },treeName: {
   type: String,required: true,default: '樹'
  },isHiddenQuery: {
   type: Boolean,required: false,default: true
  },isHiddenSave: {
   type: Boolean,default: false
  },isHiddenUpdate: {
   type: Boolean,isHiddenDelete: {
   type: Boolean,default: false
  }
 },data() {
  return {
   setTree: this.treeData,showQuery: this.isHiddenQuery,showSave: this.isHiddenSave,showUpdate: this.isHiddenUpdate,showDelete: this.isHiddenDelete,name: this.treeName,TREEDATA: {
    DATA: null,NODE: null
   },isLoadingTree: true,// 是否載入節點樹
   objectID: null,defaultProps: {
    children: 'children',label: 'name'
   },menuVisible: this.menuVisible
  }
 },watch: {
  treeData(val) {
   this.setTree = val
  },treeName(val) {
   this.name = val
  }
 },methods: {
  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
   }
  },rihgtClick(event,object,value,element) {
   if (this.objectID !== object.id) {
    this.objectID = object.id
    this.menuVisible = true
    this.TREEDATA.DATA = object
    this.TREEDATA.NODE = value
   } else {
    this.menuVisible = !this.menuVisible
   }
   document.addEventListener('click',e => {
    this.menuVisible = false
   })
   const menu = document.querySelector('#rightClickMenu')
   /* 選單定位基於滑鼠點選位置 */
   menu.style.left = event.clientX - 180 + 'px'
   menu.style.top = event.clientY - 100 + 'px'
   menu.style.position = 'absolute' // 為新建立的DIV指定絕對定位
   menu.style.width = 120 + 'px'
  }
 }
}

</script>

<style lang="scss" scoped>
.span-ellipsis {
 width: 100%;
 overflow: hidden;
 margin-left: 10px;
 white-space: nowrap;
 text-overflow: ellipsis;
}
</style>

對於元件的引用

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

元件的使用

<tree
 :tree-data="setTree"
 :tree-name="treeName"
 @NodeAdd="NodeAdd"
 @NodeUpdate="NodeUpdate"
 @NodeDel="NodeDel"
/>

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結構實現增刪改自定義功能程式碼就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。