element el-cascader实现懒加载省市区多级联选

最新推荐文章于 2025-02-08 15:34:29 发布

Artsman

最新推荐文章于 2025-02-08 15:34:29 发布

阅读量1.5k

点赞数

分类专栏：前端开发技术文章标签： vue.js elementui javascript

本文链接：https://blog.youkuaiyun.com/Liu_JiaqiPro/article/details/125993683

版权

本文介绍了如何使用Element UI的el-cascader组件实现省市区多级联动的懒加载功能。通过设置层级关系、定义value和label、配置leaf属性以及调用resolve方法，结合后台接口，实现实时加载各级列表。注意最后一级设置leaf为true，以防止无限加载，同时展示选定的值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

官方的demo

<el-cascader :props="props"></el-cascader>

<script>
  let id = 0;

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

思路就是level就是层级关系，0就是1级列表，再将获取到的数组定义为value和label，再将leaf设为false。然后将获取到的数据回调给方法resolve。最后node里面的value就是你选择的所有value的数组了。