elementUI中tree组件 懒加载使用

官网地址学习地址：传送阵

下面是 html代码

       /*这个是输入框 模糊查询的，但在懒加载 模式下，
         显得有些鸡肋，因为，这个搜索是只能查找到，已经显示在页面的数据
       */
        <el-input
          placeholder="输入关键字进行过滤"
          v-model="filterText"> //定义一个属性监听表单变化
        </el-input>
          /*
            讲几个比较重要的
            下面就是 树状结构的 load这个属性是当你点击下级，就会触发loadNode方法，
             有两个参数，控制台打印一下就知道了，
            :filter-node-method 这个是开启 上面那个查询的
            lazy 这个是开启 懒加载的
            highlight-current 这个是鼠标停留高亮，鼠标停留，会变颜色，我用的默认的，
             应该还可以自定义
             :props="props" 这个属性是定义树形结构每一行的属性，要在data中设置 
          */
        <el-tree
          class="filter-tree"
          :props="props"  
          :load="loadNode"
          lazy
          :filter-node-method="filterNode"
          highlight-current
          ref="tree"
          >

下面是vue代码

/* 
  讲几个，比较重要的
  filterText 监听用的  对应的是 v-model="filterText"搜索框
  props 这个比较重要里面有几个属性
       label：等于树形结构每一个，标签的文本名字可以随便第一，可以根据后端字段改变
       children 这个树形结构的数组
       isLeaf 是否开启可以点击，加载下一页，leaf=true的时候，点击就不会加载数据
*/
data() {
    return {
      filterText:'',
      props: {
        label: 'name',
        children: 'zones',
        isLeaf: 'leaf',
      },
    }
  },
  //搜索使用
  watch: {
      filterText(val) {
        //将数据放入 过滤器中
        this.$refs.tree.filter(val);
      }
  },
  methods: {
    //这个方法 页面打开默认tree没有数据，就会加载数据 node.level===0，就代表第一次加载
    loadNode(node, resolve) {
        //如果是第一次加载，返回自己的数据
        if (node.level === 0) {
          getSpread({uid:this.form.uid,status:1}).then(res=>{

            if(res[0].leaf == "true"){
              //等于true 关闭 可以点击下一页
              return resolve([{name:res[0].name,id:res[0].id,leaf:true}]);
            }else{
              return resolve([{name:res[0].name,id:res[0].id}]);
            }
         
          }).catch(err => {
            this.loading = false
            console.log(err.response.data.message)
          })
       }else{
        
          //加载下级数据
          getSpread({uid:node.data.id,status:2}).then(res=>{
            let arr = [];     
            res.map(function(vlaue){
               
              if(vlaue.leaf == "true"){
                 let json1 = {name:'',id:'',leaf:true};
                 json1['name'] = vlaue.name;
                 json1['id'] = vlaue.id;
                 arr.push(json1);
              }else{
                 let json2 = {name:'',id:''};
                 json2['name'] = vlaue.name;
                 json2['id'] = vlaue.id;
                 arr.push(json2);
              }
            })
             return resolve(arr);        
            }).catch(err => {
              this.loading = false
              console.log(err.response.data.message)
            })
       } 
    },
    //搜索方法
    filterNode(value, data) {
        if (!value) return true;
        
        return data.name.indexOf(value) !== -1;
    },

为了直观后端代码也放部分

/**
     * 获取用户自己的数据和下级人数
     *
     * @param uid 这个用户的id
     * @param status 是查询用户自己的数据还是，他的下级数据 ，1自己数据，2下级数据
     * @return
     */
    @Override
    public List<Map<String,String>> getOneself(Long uid,String status) {

        /*获取用户所在分组的所有数据*/
        Map<Long, YxUser> grouping = getGrouping(uid);

        /*会员等级数据*/
        Map<Integer, YxSystemUserLevel> levelMap = yxSystemUserLevelService.queryAll(new YxSystemUserLevelQueryCriteria())
                .stream().collect(Collectors.toMap(
                        (e) -> e.getGrade(),
                        (e) -> e,
                        (e1, e2) -> e1
                ));

        /*用户查询用户下级的人数*/
        Map<Long, List<Long>> collect = grouping.entrySet().stream().map((e) -> e.getValue())
                .collect(Collectors.groupingBy(
                        (e) -> Long.valueOf(e.getPartnerId()),
                        Collectors.mapping(
                                (e) -> e.getUid(),
                                Collectors.toList()
                        )
                ));

        /*返回的数据存储盒子*/
        List<Map<String,String>> listMap = new ArrayList<>();

        /*得到用户自己的数据*/
        YxUser yxUser = grouping.get(uid);
        /*拼接数据*/
        StringBuffer buffer = new StringBuffer();

        HashMap<String, String> map = null;

        /*参数等于1返回用户自己的数据*/
        if ("1".equals(status)){
            /*得到用户下级的数量*/
            Integer integer = queryNumber(collect, uid);

            map = new HashMap<>();

            map.put("id", String.valueOf(yxUser.getUid()));

            buffer.append("名称：" + yxUser.getUsername());
            buffer.append(" - ");
            buffer.append("用户等级：" + levelMap.get(yxUser.getLevel()).getName());
            buffer.append(" - ");
            buffer.append("用户电话：" + yxUser.getPhone());
            buffer.append(" - ");
            buffer.append("团队人数：" + integer);

            map.put("name", buffer.toString());

            /*如果用户没有下级，前端就不显示 加载 下级数据*/
            if (integer.equals(0)) {
                map.put("leaf", "true");
            }else{
                map.put("leaf", "false");
            }

            listMap.add(map);

            return listMap;
        }

        /*=======如果上面没有返回证明是要查找下级的数据=======*/

        /*获取这个用户下级人员 的id*/
        List<Long> longs = collect.get(uid);

        longs.forEach((e) -> {

            HashMap<String, String> longsMap = new HashMap<>();
            /*得到用户下级的数量*/
            Integer integer = queryNumber(collect,e);

            /**/
            buffer.append("名称：" + grouping.get(e).getUsername());
            buffer.append(" - ");
            buffer.append("用户等级：" + levelMap.get(grouping.get(e).getLevel()).getName());
            buffer.append(" - ");
            buffer.append("用户电话：" + grouping.get(e).getPhone());
            buffer.append(" - ");
            buffer.append("团队人数：" + integer);

            longsMap.put("name", buffer.toString());
            /*用户id*/
            longsMap.put("id", String.valueOf(e));
            /*如果用户没有下级，前端就不显示 加载 下级数据*/
            if (integer.equals(0)) {
                longsMap.put("leaf", "true");
            }else{
                longsMap.put("leaf", "false");
            }

            listMap.add(longsMap);

            /*清空原有的数据*/
            buffer.delete(0,buffer.length());

        });

        return listMap;
    }

最后的效果

好了到这里就完了，希望对你有帮助。