element 地区选择(省市区)_element ui地区选择器

前言

在开发中我们经常遇到需要用到element-ui的select选择器，select给了我们非常高的可自定义性，所以有时候需要用到地区级联选择，但是全国省市区加起来非常非常多，但也不想麻烦后端实现，我们可以使用element-china-area-data库，该库封装了全国所有的省市区县甚至村的数据，可以直接吧它的值赋给select选择器即可使用，接下来是使用教程

安装

npm install element-china-area-data -S
1

使用

import {
  provinceAndCityData,
  pcTextArr,
  regionData,
  pcaTextArr,
  codeToText,
} from "element-china-area-data";
1
2
3
4
5
6
7

说明

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

使用

<template>
	<el-form ref="ruleFormRef" :rules="rules" :model="basicInfo" :inline="true">
		<el-form-item label="出生地" prop="birth_place">
	         <el-cascader v-model="basicInfo.birth_place" :options="optionsnative_place"/>
	    </el-form-item>
	</el-form>
</template>
<script setup>
// 级联地址
import { provinceAndCityData,regionData,pcTextArr,pcaTextArr, codeToText} from 'element-china-area-data'

const optionsnative_place = provinceAndCityData
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13

本文参考：Element UI 中国省市区级联数据