Vant Cascader省市区数据太多，点一次掉一次子级数据

原创

已于 2024-04-09 19:43:46 修改 · 1.3k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

于 2024-04-08 11:25:23 首次发布

文章讨论了如何解决后端接口响应四级及以上地区数据过慢的问题，通过后端返回一级数据，前端使用Cascader组件分步加载子级，以提高性能。作者还展示了vant-address组件的使用和父子级数据处理的JavaScript方法。

背景：之前是后端把所有数据都返回（平级数据），然后前端自己写方法去处理成父子级关系来用的：js方法将省市区的平级数据转换成父子树状数据

因为之前省市区最多只有三级数据，总共不到四千条数据，所以接口返回的速度还好

最近需求是省市区县，有四级或更多级，数据实在是太多（四万多条数据），如果后端一次性返回，速度实在是太慢，十几秒后才返回，不太行，所以就新出了个接口

解决方案：后端返回一级数据，点一下父级，掉一下接口获取子级数据

父级

vant-address 是封装组件

<template>
    <div>
        <van-button color="linear-gradient(to right, #ff6034, #ee0a24)" @click="showPop">选择地址</van-button>
        <div>选择的地址名字：{
  
  {formData.areaName}}</div>
        <div>选择的地址code：{
  
  {formData.areaCode}}</div>
        <vant-address :is-areashow="isAreaVisible" @closepop="closePop" @closecancel="closeCancel"></vant-address>
    </div>
</template>
<script>
import VantAddress from '@/路径/vant-address.vue';
export default {
    data () {
        return {
            isAreaVisible: false, // 组件是否显示
            formData: {
                areaCode: '',
                areaName: ''
            }
        }
    },
    components:{
        VantAddress
    },
    methods: {
        showPop(){
            this.isAreaVisible = !this.isAreaVisible
        },
        closePop(areaName,areaIds