el-tree機構樹右鍵新增、修改、刪除總結，tree組件封裝

<template>
  <div class="tree-container">
    <div v-if="canSearch" class="search-tree  can-search">
      <Input
        v-model="searchValue"
        placeholder="請輸入關鍵字搜索"
      />
      <img class="search-icon" src="@/assets/images/search2.png" alt="" />
    </div>
    <el-tree
      v-if="show"
      ref="tree"
      :props="props"
      :data="insideTreeData"
      node-key="id"
      class="filter-tree"
      :show-checkbox="checkbox"
      :check-strictly="checkStrictly"
      highlight-current
      :expand-on-click-node="expandOnClickNode"
      :filter-node-method="filterNode"
      @node-contextmenu="rightClick"
      @node-expand="handeleNodeExpand"
      @node-click="handleNodeClick"
      :default-checked-keys="JSON.parse(defaultCheckedKeys)"
      @check-change="handleCheckChange"
    >
    </el-tree>
  </div>
</template>
<script>
export default {
  name: 'Tree',
  props: {
    value: {
      type: Array,
      default() {
        return []
      },
    },
    checkStrictly: {
      type: Boolean,
      default: false,
    },
    checkbox: {
      type: Boolean,
      default: false,
    },
    defaultCheckedKeys: {
      type: String,
      default: '[]',
    },
    expandOnClickNode: {
      type: Boolean,
      default: false,
    },
    /**
     * @description 是否可搜索
     */
    canSearch: {
      type: Boolean,
      default: false,
    },
    props: {
      type: Object,
      default: () => {
        return { label: 'label', isLeaf: 'leaf' }
      },
    },
    url: {
      type: String,
      default: '/api/Dept',
    },
    // 默認是機構數據，可選菜單數據 menu
    type: {
      type: String,
      default: 'unit',
    },
  },
  data() {
    return {
      treeNode:[],
      treeData:[],
      insideTreeData: [],
      searchValue: '',
      show: true,
    }
  },
  methods: {
    // 過濾
    filterNode(value, data) {
      if (!value) return true
      if(data.fullname){
        return data.fullname.indexOf(value) !== -1
      }else{
        return data.fullName.indexOf(value) !== -1
      }

    },
    handleClear(e) {
      // if (e.target.value === '') this.insideTreeData = this.value
    },
    // 搜索
    handleSearch() {
      this.$emit('on-search', this.searchValue)
    },
    // 獲取樹的數據
    handleTreeData() {
      this.insideTreeData = this.value
    },
    // 右鍵
    rightClick(event, data, node, obj) {
      this.treeNode = node  // 節點組件本身
      this.treeData = data // 屬性的數組中該節點所對應的對象、節點對應的
      this.$emit('rightClick', event, data, node, obj)
    },
    // 選中機構
    handleNodeClick(data, node) {
      this.$emit('handleNodeClick', data, node)
    },
    // 刪除樹節點
    delTreeNode(node){
      node.parent.removeChild(node)
    },
    //新增樹節點
    addunit(data){
      this.treeNode.doCreateChildren([data])
      // console.log(this.treeNode,'--node---')
    },
    // 修改樹節點
    editunit(node,key,data){
      // console.log(key,data.id)
      this.$set(node, 'data', data)
      // this.treeNode.parent.childNodes.map(res=> {
      //   if(res.key === key){
      //     res.id = data.sort
      //   }
      // })
      // // 排序得優化
      // this.treeNode.parent.childNodes.sort((a,b)=>b.id-a.id)
      // console.log('排序',this.treeNode.parent.childNodes)
    },
    // 設置值
    setCheckedKeys(data) {
      return this.$refs.tree.setCheckedKeys(data)
    },
    // 改變check
    handleCheckChange(data, checked, indeterminate) {
       // // 勾選的key
      // var checkedKeys = this.$refs.tree.getCheckedKeys()
      // // 暫選狀態的母tab的key
      // var halfKeys = this.$refs.tree.getHalfCheckedKeys()
      // // 合並兩個數組
      // const save = checkedKeys.concat(halfKeys)
      this.$emit('handleCheckChange', this.$refs.tree.getCheckedKeys())
    },
    // 展開事件
    handeleNodeExpand(data, node, ele){
      this.$emit('handeleNodeExpand',data, node, ele)
    },
    // 重新加載
    reload() {
      this.show = false
      this.$nextTick(() => {
        this.show = true
      })
    },
  },
  watch: {
    searchValue(val) {
      this.$refs.tree.filter(val)
    },
    value(val) {
      this.searchValue = ''
      this.handleTreeData()
    },
  },
  mounted() {
    this.handleTreeData()
    this.$eventBus.$on('clearSearchValue', () => {
      this.searchValue = ''
    })
  },
}
</script>

<style>
.el-tree>.el-tree-node{
    min-width:100%;
    display: inline-block;
}
.tree-container {
  height: calc(100vh - 75px);
  overflow: auto;
}
</style>
<style lang="less">
.search-tree{
  border-radius: 4px;
  position: relative;
  margin: 10px 0;
  // border: 1px solid #D8D8D8 !important;
  input {
    // height: 35px;
    padding: 0 35px 0 10px;
    // 修改光標顏色
    // caret-color: #51D8DE;
    &::placeholder {
      color: rgba(0,0,0,0.25);
      opacity: 1; /* Firefox */
    }
    &::-ms-input-placeholder {
      color: rgba(0,0,0,0.25);
    }
  }
  img.search-icon {
    width: 16px;
    height: 16px;
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
  }
}
</style>