el-tree实现懒加载，搜索功能（从后端进行搜索）。

predro

已于 2022-06-22 16:15:13 修改

阅读量3.2k

点赞数 2

分类专栏： vue 文章标签： javascript 前端 vue.js

于 2022-06-22 15:08:17 首次发布

本文链接：https://blog.csdn.net/weixin_45664168/article/details/125409707

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.首先看一下效果

在这里插入图片描述

2.实现懒加载

   <el-tree
          :data="orgList"
          ref="tree"
          show-checkbox
          :props="defaultProps"
          node-key="id"
          @node-click="handleNodeClick"
          @check-change="handleClick"
          :default-expanded-keys="expandArr"
          lazy
          :load="loadNode"
        >
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span class="tree-icon">
              <img
                v-if="data.isTop"
                style="width: 20px; height: 16px"
                src="@/assets/img/repositoryImg/tree.png"
                alt
              />
              &nbsp;{{ node.label }}
            </span>
          </span>
        </el-tree>

实现懒加载核心属性 lazy和 load ,elementUI官网有介绍。
实现方法

// 加载顶层数据
loadNode(node, resolve) {
      // debugger
      //如果展开第一级节点，从后台加载一级节点列表
      if (node.level === 0) {
        return resolve(this.orgList);
      }
      //如果展开其他级节点，动态从后台加载下一级节点列表
      if (node.level >= 1) {
        this.loadchildnode(node, resolve);
       
        //下面代码为操作数据回显 
        let that = this;
        setTimeout(() => {
          if (that.form.memberList) {
            //   debugger
            let ids = that.form.memberList.map((key) => {
              return key.id;
            });
            that.$refs["tree"].setCheckedKeys(ids);
          }
        }, 10);
      }
    }
    
//加载下一层数据    
async loadchildnode(node, resolve) {
    let params = {
        page: 1,
        count: 10000,
        deptId: node.data.id,
    };
    const res = await getPeopleList(params);
    let resultList = [];
    if (res.data.data.records) {
        res.data.data.records.map((key) => {
            if (key.id !== this.userInfo.user_id) {
                resultList.push({
                    label: key.name,
                    isLeaf: true,
                    id: key.id,
                    isTop: false,
                    department: key.department,
                });
            }
        });
    }
    return resolve(resultList);
}

3.实现后端搜索

实现后端搜索主要原理的通过监听输入框是否有值来控制懒加载。

 watch: {
   filterText(val)
   {
       if (val) {
           this.$refs.tree.$data.store.lazy = false;   //当输入框有值时关闭懒加载
           this.getSeachList();  //获取后端搜索的数据 
       } else {
           this.$refs.tree.$data.store.lazy = true;   // 开启懒加载
           this.getOrgList(); //加载数据
       }
   }
}