element-ui cascader 级联选择器 懒加载回显数据(2025最新解决方法)

网上找了很多方案，都写的云里雾里，搞得很复杂，难倒许多人，还浪费别人时间。

自己研究了下，发现其实非常简单：就是遍历请求已选择的的节点，把数据加到数组就行。

其实也很容易理解，既然是懒加载的数据，想要回显的话那肯定要先有数据，把选中的数据加载出来就会根据赋值自动回显。

看代码：

<el-cascader
   :options="addressOptions"
   :props="{
      multiple: true,
      lazy: true,
      lazyLoad: lazyLoadAddress,
    }"
   placeholder="单独选择省市"
   clearable
   v-model="addressValue"
   ref="cascaderRef"
></el-cascader>

 

获取地址列表，初始化第一次请求

    async getAddress() {
      const params = {
        areaLevel: 1,
        areaId: null,
      };
      const res = await getAddress(params);
      if (res.resultCode === 0) {
        this.addressOptions = res.resultData.map((item) => {
          return {
            value: item.areaId,
            label: item.areaName,
            children: [],
          };
        });
      }
    }

 

地址懒加载

async lazyLoadAddress(node, resolve) {
      if (node.level > 1) return resolve([]);
      const params = {
        areaLevel: node.level + 1,
        areaId: node.data.value,
      };
      const res = await getAddress(params);
      if (res.resultCode === 0) {
        const treeData = res.resultData.map((item) => {
          return {
            label: item.areaName,
            value: item.areaId,
            children: [],
            leaf: node.level === 1, // 我这里只有二级，根据你自己的来改动
          };
        });
        resolve(treeData);
      }
    }

 

遍历请求，加载请求回显数据

   async handleLazyDataDisplay() {
      if (!this.addressValue || !this.addressValue.length) {
        return;
      }
      // 确保级联选择器已经挂载
      await this.$nextTick();

      // 对于每个选中的路径，确保其父节点已加载
      this.addressValue.forEach(async (path) => {
        if (path && path.length) {
          // 处理省级节点
          if (path[0]) {
            // 如果需要，可以在这里手动触发省级数据的加载
            const provinceNode = {
              data: {
                value: path[0],
              },
              level: 1,
            };
            // 如果有市级节点，需要加载市级数据
            if (path.length > 1 && path[1]) {
              await new Promise((resolve) => {
                this.lazyLoadAddress(provinceNode, (nodes) => {
                  // 市级数据加载完成后的回调
                  this.addressOptions.find(
                    (item) => item.value == path[0]
                  ).children = nodes;
                });
              });
            }
          }
        }
      });

      // 确保级联选择器更新
      this.$refs.cascaderRef && this.$refs.cascaderRef.$forceUpdate();
    }

请求拿到数据调用

// 请求拿到回显值
function getData() {
　　// 注意，我这里后端定义的格式是省市区使用-拼接，这里重新拆开，你可以根据自己的来

　　// 赋值回显值

　　this.addressValue = list.map((item) => { return item.areaId.split("-"); });
　　// 加载回显值所在列数据
　　this.handleLazyDataDisplay();
}

以上就搞定自动回显了