china-area-data 地区组件和H5地区组件数据源不同，咋办？

 解答

PC端和H5端数据源不同，统一把后台数据源换掉，不要用china-area-data，直接用H5的数据源，不要想H5用后台的数据源，因为我踩坑了，主要原因是H5的@vant/area-data比PC全，如果用PC数据源，H5新增的数据，PC可能显示不了，把h5端@vant/area-data数据处理成PC端能用的结构，然后下载下来，下面方法下载的是json文件，方法里结构也处理好了，直接可以在PC端用，不要想太多，方法复制下来，放在钩子函数里，函数触发后他会给你下载好的，CV就完了，我这里是用vue3写的，有vue2需求的可以改一下，也很简单的

import { areaList } from '@vant/area-data';

const getCitys = ()=>{            
    let citys = [];
            for (let a in areaList.province_list) {
                citys.push({
                    value: a,
                    label: areaList.province_list[a],
                    children: []
                });
                for (let b in areaList.city_list) {
                    if (b.substr(0, 2) == a.substr(0, 2)) {
                    citys[citys.length - 1].children.push({
                        value: b,
                        label: areaList.city_list[b],
                        children: []
                    });
                    for (let c in areaList.county_list) {
                        if (c.substr(0, 4) == b.substr(0, 4)) {
                        citys[citys.length - 1].children[citys[citys.length - 1].children.length - 1].children.push({
                            value: c,
                            label: areaList.county_list[c]
                        });
                        }
                    }
                    }
                }
                }
 
            // 字符内容转变成blob地址
            const content = JSON.stringify(citys);
            const blob = new Blob([content]);
            // 创建一个 a 标签，添加属性
            let eleLink = document.createElement('a');
            eleLink.download = "citys.json";
            eleLink.style.display = 'none';
            eleLink.href = URL.createObjectURL(blob);
            // 触发点击，然后移除
            document.body.appendChild(eleLink);
            eleLink.click();
            document.body.removeChild(eleLink);
        }

onMounted(() => {
  getCitys()
});

//把方法放在onMounted触发一下，页面打开，会自动下载好

拿到json文件，看到了吧，结构也是PC端级联选择器能用的结构

 然后把json文件放到后台assets文件夹中

 使用方法

<template>

        <el-cascader
          v-model="form.id"
          :options="options"
          :props="{ value: 'value', label: 'label', expandTrigger: 'hover' }"
          clearable
        />


</template>
<script setup lang="ts" name="WholePeople">
import address from '@/assets/response/citys.json'
const options = ref(address)
</script>


// v-model="form.id"不要直接复制，换成自己的

结束，觉得好用，点个赞