element-el-tree的懒加载+搜索定位+动态树结构，效果如下，每个树都有自己独立的搜索独立的数据

1.需求是懒加载+搜索定位+动态树结构，效果如下，每个树都有自己独立的搜索独立的数据

 

2.需求清除了下面开始上传代码  树结构是遍历出来的    

treeList   v-for(item,index) in  treeList    :key="index"

 

 <el-tree

              :ref="'tree' + item.id"    //记录refs使其成为唯一值 

              class="myscroll tree-content"

              :data="item.value"     //也可以写成 treeList[index].value

              show-checkbox

              node-key="id"

              :current-node-key="currentKey"

              lazy      //懒加载的关键

              :load="loadNode"   //懒加载的方法  这个方法执行在树列表加载之前

              :default-expanded-keys="nIdeidlist"

              :props="defaultProps"

              :filter-node-method="filterNode"

              :expand-on-click-node="false"

              @node-drag-end="handleDragEnd"

              @node-drop="handleDrop"

              draggable

            >

              <span class="custom-tree-node" slot-scope="{ node, data }">

                <span>{{ node.label }}</span>

                <span>

                  <el-button

                    type="text"

                    size="mini"

                    @click="() => addNode(node, data)"

                    >添加</el-button

                  >

                  <el-button

                    type="text"

                    size="mini"

                    @click="() => importNode(node, data)"

                    >导入</el-button

                  >

                  <el-button

                    type="text"

                    size="mini"

                    @click="() => handleDelete(node, data)"

                    >删除</el-button

                  >

                </span>

              </span>

</el-tree>

 

 3. JS

loadNode(node, resolve) {

　　//node 是树列表的信息结构   // console.log(node);

　　//resolve  回调函数  这个回调函数很关键 是把接受值 返回给书列表 :data的关键

　　

     //第一级的渲染

      if (node.level == 0) {

      //回调到:data=" resolve(node.data)"里面渲染

        resolve(node.data);

        node.resolve = resolve;

        // console.log(resolve);

    　//因为树列表是动态的所以用数组的方式存储回调函数  调用的时候利用索引调用就行了

        this.numtreelist.push(resolve);

 

　　  //大于一级的渲染

      } else if (node.level >= 1) {

        // 调接口渲染  传入回调函数与参数

        this.treesonlist(

          resolve,

          node.data.id,

          node.data.treeUid,

          this.queryParmas.name,

          ""

        );

      }

    },

 

3.上面大于一级渲染的时候调用了接口

    调用的时候也分情况  有搜搜有值的时候 搜索框无值的时候

treesonlist(resolve, id, uid, name, attribute, itemdata) {

      console.log(itemdata);

      // console.log(resolve, id, uid, name, attribute);

      if (!attribute) {

        console.log("搜索无字");

        if (itemdata) {

          this.$nextTick(() => {

            this.$refs["tree" + itemdata.id][0].store.lazy = true;  //这一步是说搜索无字的时候那么就正常渲染 加上 lazy=tree

          });

        }

        queryAllTreeInfo({

          id: id,

          uid: uid,

          name: name,

          attribute: attribute,

        }).then((res) => {

          if (res.code == 200) {

          

            if (id == 0) {

              this.nIdeidlist = [];

              this.treeList[res.data[0].num].value = res.data;

            }

            resolve(res.data);

          } else {

            this.$message.error("条件错误，服务异常！");

          }

        });

      } else {

        console.log("有字");

        if (itemdata) {

          this.$nextTick(() => {

            this.$refs["tree" + itemdata.id][0].store.lazy = false;  //这一步是说搜索有字的时候那么加上 lazy=falese  就是说搜索框有字的时候不要懒加载 需要把搜索的结果默认展开

          });

        }

        queryAllTreeInfo({

          id: id,

          uid: uid,

          name: name,

          attribute: attribute,

        }).then((res) => {

          if (res.code == 200) {

            this.treeList[res.data[0].num].value = res.data[0].value;

            this.pushID(res.data[0].value);

          } else {

            this.$message.error("条件错误，服务异常！");

          }

        });

      }

    },

  4.获取默认展开的数组

//递归获取所有树节点下查询的ID

    pushID(Array) {

      Array.forEach((item) => {

        this.nIdeidlist.push(item.id);

        if (item.children && item.children.length > 0) {

          this.pushID(item.children);

        }

      });

    },