VUE3 el-cascade组件实现省市区动态加载，完整代码！

最新推荐文章于 2025-06-24 16:49:05 发布

原创最新推荐文章于 2025-06-24 16:49:05 发布 · 784 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #javascript

实现动态加载省市区的功能，由于数据量有点多，所以第一次查询出来所有的省，点击省的时候调用接口查询下面的市，点击市的时候在调用接口显示下面的区。官网写的很不详细，泛泛而谈，以下提供完整代码。下面是前端页面效果图：

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

</template>

<script lang="ts" setup>
import type { CascaderProps } from 'element-plus'
const props: CascaderProps = {
  lazy: true,
  async lazyLoad(node, resolve) {
//查询省市区调用的接口看后端如何设计，我这里是所有的接口调用同一个，每次调用传父节点的id，代码为//了好理解，省市区调用的接口我写了三个
    const level = node.level
      const parentId = node.value
      let options;
      if(level==0){
        let data = await getProvince()
        options = data.map(item => ({
          value: item.name,
          label: item.value,
          leaf: level >= 2,
        }))
         
      }else if(level==1){
         let data = await getCity({
             provinceId:parentId
        })
        options = data.map(item => ({
          value: item.name,
          label: item.value,
          leaf: level >= 2,
        }))
      }else if(level == 2){
        let data = await getDistrict({
            cityId:parentId
        })
        options = data.map(item => ({
          value: item.name,
          label: item.value,
          leaf: level >= 2,
        }))
      }
      resolve(options)
  }
}
</script>