element-ui tree結構實現(xiàn)增刪改自定義功能代碼

更新時間：2020年08月31日 10:27:11 作者：一行注釋

這篇文章主要介紹了element-ui tree結構實現(xiàn)增刪改自定義功能代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

首先是頁面部分

<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數(shù)據(jù)
   expandedKey:[],//展開節(jié)點
   checkedID:''//選中節(jié)點
  }
 },
 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, store, 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>;
   }
  },
//新增節(jié)點
  append(data) {
   const newChild = { id: new Date().getTime(), label: '', children: [],
      isEdit: true };
//判斷是否有子節(jié)點
   if (!data.children) {
    this.$set(data, 'children', []);
   }
   data.children.push(newChild);
   this.expandedKey=[data]//展開點擊節(jié)點
  },
//移除節(jié)點
  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)
  },
//點擊節(jié)點 移除默認選中節(jié)點
  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>
  <!--鼠標右鍵點擊出現(xiàn)頁面-->
  <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,
   required: false,
   default: false
  },
  isHiddenUpdate: {
   type: Boolean,
   required: false,
   default: false
  },
  isHiddenDelete: {
   type: Boolean,
   required: false,
   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, // 是否加載節(jié)點樹
   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' // 為新創(chuàng)建的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結構實現(xiàn)增刪改自定義功能代碼就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: