vue eleemntui 级联组件懒加载获取数据

项目中用到的Element UI tree组件,由于向后台请求回来的数据庞大,需要使用懒加载,就研究了下,总结代码如下

html代码

<el-cascader
              ref="objArrcasa"
              v-model="form_list_.leadsQueryInfo.areaIdList"
              :props="listPropsSHDQ"
              clearable
              @change="handleChange1($event, 1)"
            ></el-cascader>

js 代码

data(){
//级联下拉懒加载获取数据
    function changeSele(node, resolve) {
      // console.log(resolve);
      axios.get(`common-api/address/query?parentId=${node.value}`).then((res) => {
        if (res.data.code === 0) {
          const nodes = res.data.result.map((val) => ({
            value: val.addressId,
            label: val.addressName,
            leaf: node.level >= 2,
          }));
          resolve(nodes);
        }
      });
    }
	return{
	listPropsSHDQ: {
        lazy: true,
        checkStrictly: true,
        lazyLoad(node, resolve) {
          if (node.level === 0) {
            node.value = 0;
          }
          changeSele(node, resolve);
          //清除第四级
          if (node.level == 3) {
            node.loading = false;
          }
        },
      },
	}
}