element-ui tree 구 조 는 사용자 정의 기능 코드 를 추가 삭제 하고 수정 합 니 다.

우선 페이지 부분 입 니 다.

<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, 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>;
   }
  },
//    
  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,
   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, //        
   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 구 조 는 사용자 정의 기능 코드 를 추가 삭제 하고 수정 하 는 것 이 바로 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.참고 하 시기 바 랍 니 다.여러분 들 도 저 희 를 많이 사랑 해 주 셨 으 면 좋 겠 습 니 다.