2021-06-15

Vue element 中关于懒加载的使用

1.在树形控件tree中load()的使用

这是树形表格的代码
     <el-table
        :data="tableData"
        row-key="equipId"
        node-key="id"
        :tree-props="{ children: 'children', hasChildren: 'subordinate' }"
        lazy
        :load="load"
        border
        ref="multipleTable "
        highlight-current-row
        @selection-change="handleSelectionChange"
      >

load方法，treeNode为当前tree下的node节点，resolve是返回值
    load(tree, treeNode, resolve) {
      const pid = tree.equipId;
      this.maps.set(pid, { tree, treeNode, resolve });
      console.log(pid, "this.pid");
      setTimeout(() => {
        const { data } = factoryApi
          .pgetProductionage({
            equipSuperior: tree.equipId,
          })
          .then((res) => {
            res.data.data.forEach((item) => {
              item.hasChildren = true;
              item.children = [];
              this.resolve = resolve;
              this.node = tree.equipId;
            });
            if (res.data.data.length) {
              this.$set(tree, treeNode, resolve);
            }
            resolve(res.data.data);
          });
      }, 500);
    },

2.级联中所用lazyload（）方法

这是饿了么官方文档的案例，我刚用这个的时候觉得文档给的很low，但是用起来发现这个很有代表性
官方文档将这个懒加载定义到data里，我没有尝试给这个方法提出来，因为data（）本身就是一个方法。
//定义el-cascader
<el-cascader :props="props"></el-cascader>

<script>
//定义变量id
  let id = 0;

  export default {
    data() {
      return {
        props: {
        //是否为懒加载
          lazy: true,
          //node为节点，resolve为返回数据
          lazyLoad (node, resolve) {
            const { level } = node;
            setTimeout(() => {
              const nodes = Array.from({ length: level + 1 })
                .map(item => ({
                  value: ++id,			//value值
                  label: `选项${id}`,//显示值
                  leaf: level >= 2 //设置大于2的节点为叶子节点
                }));
              // 通过调用resolve将子节点数据返回，通知组件数据加载完成
              resolve(nodes);
            }, 1000);//延时1000ms
          }
        }
      };
    }
  };
</script>

好我们现在了解了一下基本的级联中lazyload()是如何使用的了，如果实战该怎么使用，我当时是用callback将函数的返回值进行回调，隐私缘故我只放部分代码

  <el-cascader
    width="200px"
    :props="listQuery.props"
    v-model="listQuery.projectName"
    :fetch-suggestions="projectQuerySearch"
    placeholder="请输入"
    :trigger-on-focus="false"
    @select="handleSelectProject"
    @change="proidChange"
    filterable
    clearable
    ref="projectName"
  ></el-cascader>
  >        //三级联动
        props: {
          lazyLoad(node, resolve) {
             setTimeout(() => {
              if (level == 0) {
                that.geta((getabc) => {
                  let arr = getabc.map((item) => ({
                    value: item.value,
                    label: item.label,
                    leaf: item.leaf,
                  }));
                  resolve(arr);
                });
              }
            });
          },
        },
        //js
    geta(callback) {
      let queryParams = {
        getabc: this.getabc,
      };
      // 请求接口
      steelDispatchApi.getabc(queryParams).then((res) => {
        // 赋值
        let result = res.data.data;
        for (var i = 0; i < result.length; i++) {
          result[i].value = result[i].a;
        }
        this.getabc= result;
        callback(res.data.data);
      });
    },