采取el-tree达成懒加载、请求对象的检索依次进行

原创
小哥 2年前 (2022-11-23) 阅读数 108 #大杂烩

首要条件: 要求后端返回检索后的文件夹id集合
主要通过这个属性去实现defaultExpandedKeys

     开始检索 
    
    

我们这里举例检索返回的数据为:[8, 9, 1, 4, 3, 6, 5]

并且造假数据,只要展开节点就会加载递增id的树节点,也就是1 -> 2, 3, 2 -> 4, 5 依次类推

所以未检索前的树状态如下:

点击检索之后

逻辑代码以及假数据代码:

    search() {
      this.defaultExpandedKeys = [8, 9, 1, 4, 3, 6, 5];
    },
    getTree() {
      return this.$refs.tree;
    },
    loadNode(node, resolve) {
      setTimeout(() => {
        if (node.level === 0) {
          resolve([{
            id: 1,
            label: 1,
            children: []
          }, {
            id: 2,
            label: 2,
            children: []
          }])
        }
        const data = [];
        this.fakeId++;
        data.push({
          id: this.fakeId,
          label: this.fakeId,
          children: [],
        })
        this.fakeId++;
        data.push({
          id: this.fakeId,
          label: this.fakeId,
          children: [],
        })
        resolve(data)
      }, 500);
    },

所有代码:

APP.VUE







版权声明

所有资源都来源于爬虫采集,如有侵权请联系我们,我们将立即删除

热门