在写项目的时候碰到的,写一个树组件(原以为特简单,只到数据量特别大),我用了default-expand-all(展开全部节点)直接崩了 (╯‵□′)╯︵┻━┻
然后开始是用懒加载,写完之后只有全部展开之后才能内部搜索,显然不符合用户体验(几千上万个数据中找几个没有直接搜,简直反人类)
最后就是写两个树,一个懒加载,一个后台搜索拿到渲染一个新树,两个来回切换
懒加载请求的树以下简称懒加载树,搜索获取数据渲染新树以下简称搜索树

           <div>
             <el-input v-model="searchMsg" size="medium" suffix-icon="el-icon-search"></el-input>
           </div>
           <div class="tree">
              <!-- <keep-alive> -->
                  <el-tree
                    class="tree1"
                    v-show="treeShow"
                    key="1"
                    :data="treeData"
                    show-checkbox
                    node-key="id"
                    :default-expanded-keys="[chooseTree]"
                    :default-checked-keys="[...selectedSN]"
                    @check-change="getChecked"
                    default-expand-all
                    ref="tree">
                  </el-tree>
                  <!-- :filter-node-method="filterNode" -->
                  <el-tree
                    class="tree2"
                    v-show="!treeShow"
                    key="2"
                    node-key="id"
                    :default-expanded-keys="[chooseTree]"
                    @check-change="getChecked2"
                    expand-on-click-node
                    :default-checked-keys="[...selectedSN2]"
                    :props="defaultProps"
                    :load="loadNode"
                    lazy
                    show-checkbox
                    ref="tree2">
                  </el-tree>
              <!-- </keep-alive> -->
          </div>

v-if和v-show都行,但是v-if需要在树组件外层加一个keep-alive缓存组件,不然会反复销毁报错

watch:{
      if (this.searchMsg&&this.treeShow==false) {  //判断是否搜索&&显示的是不是懒加载树
          this.treeShow = true
          this.selectedSN = this.selectedSN2   //给懒搜索树赋值
          this.searchStation()
        }else if(this.searchMsg&&this.treeShow){//新加的这个判断为了避免输入多个文字,删除调用进不到上面的问题,并且可能选择了需要push合并一下  
          //判断是否搜索&&显示的是不是搜索树
          this.selectedSN2.push(...this.selectedSN)
          this.selectedSN = this.selectedSN2
          this.searchStation()
        }else{
          this.selectedSN2.push(...this.selectedSN)
          this.$refs.tree2.setCheckedKeys(Array.from(new Set(this.selectedSN2)))
          this.treeShow = false
        }

监听searchMsg,有值说明是搜索,为''则显示懒加载树

getChecked(data,state){   //获取id
        if (state == false) {//判断是state,true为勾选,false为取消勾选
          let index;
          this.selectedSN2.map((item,index1)=>{  
            //获取取消的下边,用于删除this.selectedSN2中的勾选项,这个我们上面的
            //this.selectedSN2.push(...this.selectedSN)就不会拿到在搜索树取消,懒加载树上存在此勾选的值
            if (item == data.id) {
              index= index1
            }
          })
          if(index>=0){
            this.selectedSN2.splice(index,1)  
            //删除在搜索树上取消勾选的值(在懒加载勾选abc,搜索abc会为勾选状态
            //( this.selectedSN = this.selectedSN2 //懒加载树上的勾选项赋值给搜索树)这个赋值的作用),
            //在搜索树上取消,就需要我们把兰家紫树上也删除掉
          }

        }
          this.chooseTree=this.$refs.tree.getCheckedKeys()
        let newArr=[]
        this.chooseTree.forEach((ele,index,arr)=>{//判断父节点并返回子节点
          if(arr[index]>9999){
            newArr.push(arr[index])
          }
        })
        this.selectedSN = newArr
      },
      getChecked2(data,data1,data2){   //获取id
        this.chooseTree2=this.$refs.tree2.getCheckedKeys()
        let newArr=[]
        this.chooseTree2.forEach((ele,index,arr)=>{//判断父节点并返回子节点,我的是因为有国家省市id不会大于9999,我需要过滤一下
          if(arr[index]>9999){
            newArr.push(arr[index])
          }
        })
        this.selectedSN2 = newArr
      },
searchStation(){   //搜索
        let data={
          snType:0,
          searchInfo:this.searchMsg,
          searchType:this.value,
        }
        this.$api.stationFindStation(data).then(res=>{
          this.treeData=res.data.data  //搜索树的数据
          this.$refs.tree.setCheckedKeys(this.selectedSN)   //给搜索树设置勾选项
        })
      },
loadNode(node, resolve) {   //懒加载,点击展开触发
        let data;
        if(node.level == 0){
          data = {
            type:node.level,
            snType:0
          }
        }else {
           data = {
            type:node.level,
            id:node.data.id,
            snType:0
          }
        }
        this.$api.stationFindStation(data).then(res=>{
          this.data = res.data.data
          setTimeout(()=>{
            resolve(this.data); //懒加载的数据插进去
            this.$refs.tree2.setCheckedKeys(this.selectedSN2)//设置勾选
          },300)
        })
      },
search(){
        this.selectedSN2.push(...this.selectedSN) 
        this.$refs.tree2.setCheckedKeys(Array.from(new Set(this.selectedSN2)))
        //我的主要数据在懒加载树上,防止他在搜索树上直接去查询,合并一下勾选项
        let inverterIds=[],stationIds=[]
        this.selectedSN2.map((item,index)=>{
          if((this.$refs.tree.getNode(item)&&this.$refs.tree.getNode(item).data.leaf)||(this.$refs.tree2.getNode(item)&&this.$refs.tree2.getNode(item).data.leaf)){
            //判断在哪个树上有,leaf这个是defaultProps中的代表是否为父节点,显示可以展开的箭头,最后一级为leaf:true,别的都没有做判断
            inverterIds.push(item)
            inverterIds = Array.from(new Set(inverterIds))   //去重

            this.inverterIds = inverterIds.join(',')
          }else{
            stationIds.push(item)
            stationIds = Array.from(new Set(stationIds))     //去重
            this.stationIds = stationIds.join(',')
          }

        })
        console.log(this.inverterIds+'---------'+this.stationIds)
        //区分出来是最后一级的id,还是倒数第二级的id,分开传给后台实现查询
      },

这个我在网上没找到,自己写了一个,水平不咋地,见谅见谅

(～▽～)～■干杯□～(～▽～)