ElementUi之Cascader 级联选择器el-cascader（异步获取数据源，lazyLoad）

最新推荐文章于 2025-09-15 17:57:13 发布

原创最新推荐文章于 2025-09-15 17:57:13 发布 · 3.4k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui

element 专栏收录该内容

1 篇文章

订阅专栏

这篇博客介绍了如何在Element UI的级联选择器el-cascader中实现异步加载数据源，特别是针对省市区三级联动的场景。通过设置`lazy`属性和`lazyLoad`回调函数，根据层级动态获取数据。在`lazyLoad`中，利用`switch`语句判断当前层级并调用`getArea`方法获取对应级别的区域数据，然后通过`resolve`返回给组件。此方法适用于数据量大且需要分层级加载的情况。

级联选择器el-cascader（异步获取数据源，lazyLoad）

官网地址：https://element.eleme.cn/#/zh-CN/component/cascader
在这里插入图片描述

官网示例
省市区三联用法
data中调用methods中方法需再create时声明_that=this;_that（自己定义名字),放到export外部；

var _that;
export default {

 props: {
          lazy: true,
          lazyLoad(node, resolve) {
            const {
              level
            } = node;
            let nodes = [];
            //判断当前node是否携带data数据，无数据则父级id为null否则对parentId 赋值
            let parentId = node.data ? node.data.id : null;
            let levels = '';
            switch (level) {
              case 0:
                levels = 'province';
                break;
              case 1:
                levels = 'city';
                break;
              case 2:
                levels = 'district';
                break;
              case 3:
                levels = 'street';
                break;
            }
            _that.getArea(levels, parentId).then(res => {
              nodes = res;
              resolve(nodes);
            });
            // 通过调用resolve将子节点数据返回，通知组件数据加载完成

          },
        },

methods:{
//传入父级id及level，
async getArea(level, parentId) {
        let data = {
          level: level,
          parentId: parentId
        }
        let select = [];
        await getDistrict(data).then(res => {
          res.rows.forEach(item => {
            item.value = item.adcode;
            item.label = item.name;
            item.leaf = data.level == 'street' ? true : false;
          })
          select = res.rows;
        })
        return select;
      },
}