基于element-plus和element-china-area-data的中国省、市、区的地区选择器

目的

        实现新增地址时省、市、区的地区选择，如果使用手写json的方式，由于中国的省、市、区数量很多，会导致工作量很大，且容易出错。

效果图

工具

        element-plus的<el-cascader>级联选择器组件，库element-china-area-data。

        npm库文件下载工具，vue框架。

工具解释

        element-plus的<el-cascader>级联选择器组件可以进行级联选择，可以作为展示数据以供选择的组件。

        库element-china-area-data的核心是china-division，不过china-division的返回值只有当地的六位数字的地区码，无法使用，element-china-area-data对china-division进行了封装，既可以返回地区码，也可以返回具体的值。

操作步骤

        1、在项目中下载element-china-area-data包。

npm install element-china-area-data -S

        2、导入需要的组件。

import { pcaTextArr } from "element-china-area-data";

也有其他的，不过“pcaTextArr”代表省市区联动数据，是纯汉字。

        3、将element-plus的<el-cascader>组件和element-china-area-data联合起来使用。

<el-cascader v-model="area" v-bind:options="pcaTextArr" size="large" />

这样就实现了。

补充

        由于此组件返回值的类型为数组，不便存储和传递，这里提供一种更好的解决方案。

方案描述

        以数组来接受数据，但是转为字符串类型存到数据库中，数组转为字符串可以通过toString()方法来实现，原先数组中的每个数据在字符串中会以“，”逗号隔开。而修改时再将字符串转为数组，字符串转为数组可以通过split()方法实现，传入的参数为分隔符，即split(",")。

代码实现

<script setup>
import { ref, reactive } from 'vue';
import { pcaTextArr } from "element-china-area-data";
let receivingInfo = reactive({
    receivingId : 1001,
    area : '安徽省,芜湖市,镜湖区',
})

let area = ref(receivingInfo.area.split(","));

let updateAddress = () => {
    receivingInfo.area = area.value.toString();
}
</script>

<template>
    <div>
        <p>所在地区 :</p>
        <el-cascader v-model="area" 
                     v-bind:options="pcaTextArr" 
                     style="margin-top: 5px;" 
                     size="large" 
                     @change="updateAddress()"/>
    </div>
</template>

<style scoped>

</style>

参考博文

https://blog.csdn.net/m0_63209237/article/details/134030737

element-china-area-data - npm