当前位置：首页 > news >正文

vue3 使用 element-china-area-data 实现地区选择器

news 2025/7/2 6:02:36

官方地址：https://www.npmjs.com/package/element-china-area-data?activeTab=readme

在线示例：https://plortinus.github.io/element-china-area-data/index.html

实际使用

		<el-col :span="12"><el-form-item label="所处城市" prop="address"><el-cascaderv-model="temp.address":options="pcaTextArr()"/></el-form-item></el-col>import { pcaTextArr } from 'element-china-area-data'pcaTextArr() {return pcaTextArr},

安装

npm install element-china-area-data -S

import 使用

我引用的是v6版本，组件有改动

import {provinceAndCityData,pcTextArr,regionData,pcaTextArr,codeToText,
} from "element-china-area-data";

provinceAndCityData省市二级联动数据,汉字+code
regionData省市区三级联动数据
pcTextArr省市联动数据，纯汉字
pcaTextArr省市区联动数据，纯汉字
codeToText是个大对象，属性是区域码，属性值是汉字用法例如：codeToText[‘110000’]输出北京市

省市二级联动:

<template><div id="app"><el-cascadersize="large":options="provinceAndCityData"v-model="selectedOptions"></el-cascader></div>
</template><script>import { provinceAndCityData } from 'element-china-area-data'export default {data () {return {provinceAndCityData,selectedOptions: []}},}
</script>

省市二级联动,纯汉字:

<template><div id="app"><el-cascadersize="large":options="pcTextArr"v-model="selectedOptions"></el-cascader></div>
</template><script>import { pcTextArr } from 'element-china-area-data'export default {data () {return {pcTextArr,selectedOptions: []}},}
</script>

省市区三级联动

<template><div id="app"><el-cascadersize="large":options="regionData"v-model="selectedOptions"></el-cascader></div>
</template><script>import { regionData } from 'element-china-area-data'export default {data () {return {regionData,selectedOptions: []}},}
</script>

省市区三级联动，纯汉字

<template><div id="app"><el-cascadersize="large":options="pcaTextArr"v-model="selectedOptions"></el-cascader></div>
</template><script>import { pcaTextArr } from 'element-china-area-data'export default {data () {return {pcaTextArr,selectedOptions: []}},}
</script>