element-ui级连选择器如何实现懒加载

级连选择器实现懒加载主要是需要在props配置lazyLoad方法，官网并没有通过调接口实现懒加载的具体的例子，只有一个写死的数据。

不过需要注意的是在data里面调用接口的时候需要先保存this变量，否则获取不到methods里面的方法会报错，

lazyLoad方法里面主要是将接口获取到的数据整理成定义的参数

props里面可以针对数组的key，value进行自定义。

其他部分可参考官网。

以下代码供参考：

<el-cascader

                  v-model="form.projectType"

                  :options="workTypeOptions"

                  :props="workTypeOptionsProps"

                  @change="handleChange"

                  clearable

                ></el-cascader>

 data() {

    let _this = this;

    return {

        workTypeOptionsProps: {

        value: "dictCode",

        label: "dictCodeDesc",

        lazy: true,

        emitPath: false,

        lazyLoad(node, resolve) {

          const { level } = node;

          node.value &&

            setTimeout(async () => {

              let nodes = await _this.getProjectTypeOptions(node.value);

              let n = nodes.map((item) => ({

                dictCode: item.project_type,

                dictCodeDesc: item.project_type_name,

                leaf: level < 2,

              }));

              // 通过调用resolve将子节点数据返回，通知组件数据加载完成

              resolve(n);

            }, 1000);

        },

      },

    }

}

    }

}

methods: {

    handleChange(node) {},

    async getProjectTypeOptions(workType) {

      let res = await getProjectTypeList({ workType: workType });

      if (res) {

        return res.content || [];

      }

    },

} 

本文章由javascript技术分享原创和收集