官方地址:https://www.npmjs.com/package/element-china-area-data?activeTab=readme
在线示例:https://plortinus.github.io/element-china-area-data/index.html
实际使用
java
<el-col :span="12">
<el-form-item label="所处城市" prop="address">
<el-cascader
v-model="temp.address"
:options="pcaTextArr()"/>
</el-form-item>
</el-col>
import { pcaTextArr } from 'element-china-area-data'
pcaTextArr() {
return pcaTextArr
},
安装
java
npm install element-china-area-data -S
import 使用
我引用的是v6版本,组件有改动
java
import {
provinceAndCityData,
pcTextArr,
regionData,
pcaTextArr,
codeToText,
} from "element-china-area-data";
provinceAndCityData省市二级联动数据,汉字+code
regionData省市区三级联动数据
pcTextArr省市联动数据,纯汉字
pcaTextArr省市区联动数据,纯汉字
codeToText是个大对象,属性是区域码,属性值是汉字 用法例如:codeToText['110000']输出北京市
省市二级联动:
java
<template>
<div id="app">
<el-cascader
size="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>
省市二级联动,纯汉字:
java
<template>
<div id="app">
<el-cascader
size="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>
省市区三级联动
java
<template>
<div id="app">
<el-cascader
size="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>
省市区三级联动,纯汉字
java
<template>
<div id="app">
<el-cascader
size="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>