el-cascader动态懒加载子项，三级联动省市效果

最新推荐文章于 2024-07-10 14:05:50 发布

熊抱抱的一粒

最新推荐文章于 2024-07-10 14:05:50 发布

阅读量840

点赞数

文章标签： vue elementui

本文链接：https://blog.csdn.net/qq_52959651/article/details/116498817

版权

本文展示了如何使用Vue和ElementUI实现动态懒加载的三级联动效果，特别是省市地区的展示。通过点击不同层级，依次加载下级地区，最终实现了一个简洁的地区选择功能。

摘要由CSDN通过智能技术生成

先看效果，点击北京出现市区，点击市区出现详细地区，我这个人比较懒惰，详细地区就复制粘贴修改一下了。
在这里插入图片描述
贴代码，一开始借鉴另一位博主的代码，但是一直有报错resolve is not a function，就很苦恼，效果可以实现，又看了官方网站，自己修修改改，这样子差不多就实现了。

<template>
  <div class="main">
    <el-cascader :props="props"></el-cascader>
  </div>
</template>
<script>
export default {
    
  data() {
    
    return {
    
      placeholder: "",
      defaultName: "",
      props: {
    
        label: "text",
        value: "id",
        lazy: true,
        lazyLoad: (node, resolve) => {<