vue element tree树形图 前端组装树 并添加搜索功能

记录一下，以免下次遇到这个问题又要花时间写，本来想一步步拆解分析的，转念一想有点不想动脑子直接cv算了，cv大法嘎嘎香

<template>
  <div class="content">
    <div class="top">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="名称">
          <el-input
                  v-model="formInline.name"
                  clearable
                  placeholder="请输入搜索名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="getSearch">搜索</el-button>
        </el-form-item>
      </el-form>
      <div>
        <el-button type="primary" @click="added">新增</el-button>
        <el-button type="primary" @click="edit">修改</el-button>
        <el-button type="warning" @click="deleteArr">删除</el-button>
      </div>
    </div>
    <div class="tree">
      <el-tree
              :props="props"
              :load="loadNode"
              lazy
              show-checkbox
              :check-strictly="true"
              @check-change="handleCheckChange">
      </el-tree>
    </div>
    <MainDialog ref="mainDialog"
                @create="handleCreateSubmit"
                @update="handleUpdateSubmit" />
  </div>
</template>

<script>
  import {getAll, getDelete, getUpdate, geDetail} from "@/api/fishSubject/fishSubject";
  import { fuzzyMatching, removeDuplicateObj } from "@/util/publicMethods"
  import MainDialog from "./mainDialog.vue"
  export default {
    components:{
      MainDialog,
    },
    data() {
      return {
        formInline:{
          name:null,
        },

        props: {
          label: 'cnName',
          children: 'zones'
        },
        ListData:[],
        oldData:[],
        node_had:null,
        resolve_had:null,
        parentArr:[],

        checkArr:[],
      };
    },
    mounted() {
      this.onSubmit()
    },
    methods:{
      onSubmit(){
        getAll().then(({data})=>{
          this.ListData = data.result
          this.oldData = data.result
          this.requestNewData()
        })
      },
      //  搜索
      getSearch(){
        this.form = {
          ...this.formInline
        };
        this.search(this.form)
      },
      added(){},
      edit(){},
      handleCreateSubmit(form,done){},
      handleUpdateSubmit(form,done){},
      deleteArr(){},

      handleCheckChange(data, checked, indeterminate) {
        console.log(data, checked, indeterminate);
        if(checked) {
          this.checkArr.push(data)
        }else {
          this.checkArr = this.checkArr.filter((item) => {
            return item.code != data.code
          });
        }
      },
      loadNode(node, resolve) {
        setTimeout(()=>{
          if (node.level === 0) {
            let arr = this.ListData.filter((item)=>{return item.parentId == null});
            this.node_had = node;   //这里是关键！在data里面定义一个变量，将node.level == 0的node存起来
            this.resolve_had = resolve;  //同上，把node.level == 0的resolve也存起来
            return resolve(arr);
          }
          if (node.level > 0 ) {
            let arr = this.ListData.filter((item)=>{return item.parentId == node.data.id});
            return resolve(arr);
          };
        },100)
      },
      //   刷新树
      requestNewData() {
        this.node_had.childNodes = [];//把存起来的node的子节点清空，不然会出现重复树！
        this.loadNode(this.node_had, this.resolve_had);//再次执行懒加载的方法
      },
      //
      search(form){
        this.ListData = this.oldData
        //  根据名字 查父级
        if (this.formInline.name) {
          let arr = fuzzyMatching(this.ListData,this.formInline.name,"cnName")
          // console.log(arr)
          // let arr = this.ListData.filter((item)=>{return item.cnName == form.name});
          let arr2 = []
          if (arr.length) {
            this.nameDg(arr,arr2)
            let parentArr = this.nameDg(arr,arr2)
            this.ListData = arr.concat(parentArr)
            this.ListData = removeDuplicateObj(this.ListData)
            // console.log(this.ListData)
            this.requestNewData()
          }else {
            this.$message.warning("搜索为空")
          }

        }
        if ( !this.formInline.name) {
          this.onSubmit()
        }
      },
      nameDg(arr,arr2){
        if (this.formInline.name){
          arr.forEach((item,index)=>{
            let parent = this.ListData.filter((i)=>{return item.parentId == i.id})
            this.parentArr = this.parentArr.concat(parent)
            arr2 = arr2.concat(this.parentArr);
          })
          let breaks = arr2.filter((item) =>{ return item.parentId == null})
          if( breaks.length > 1 || breaks.length == 1){
            const removeDuplicateObj = (arr) => {
              let newArr = []
              let obj = {};
              for (var i = 0; i < arr.length; i++) {
                if (!obj[arr[i].id]) {
                  newArr.push(arr[i]);
                  obj[arr[i].id] = true;
                }
              }
              return newArr
            };
            removeDuplicateObj(arr2)
            return removeDuplicateObj(arr2)
          }else {
            this.nameDg(this.parentArr,arr2)
          }
        }
      },
    }
  }
</script>

查询条件要根据接口的字段查

引入的两个方法

//  对象数组去重
export function removeDuplicateObj(arr) {
  let newArr = [];
  let obj = {};
  for (let i = 0; i < arr.length; i++) {
    if (!obj[arr[i].id]) {
      newArr.push(arr[i]);
      obj[arr[i].id] = true;
    }
  }
  return newArr;
}

//  模糊匹配
export function fuzzyMatching(list, keyWord, attribute = 'name') {
  const reg = new RegExp(keyWord); // 创建正则表达式
  const arr = [];
  for (let i = 0; i < list.length; i++) {
    if (reg.test(list[i][attribute])) {
      arr.push(list[i]);
    }
  }
  return arr;
}