这里写目录标题
安装
npm install element-china-area-data -S
官网例子使用
{ provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data'
- provinceAndCityData是省市二级联动数据(不带“全部”选项)
- regionData是省市区三级联动数据(不带“全部”选项)
- provinceAndCityDataPlus是省市二级联动数据(带“全部”选项)
- regionDataPlus是省市区三级联动数据(带“全部”选项)
- “全部"选项绑定的value是空字符串”"
- CodeToText是个大对象,属性是区域码,属性值是汉字 用法例如:
CodeToText['110000'] 输出 北京市
- TextToCode是个大对象,属性是汉字,属性值是区域码 用法例如:
TextToCode['北京市'].code 输出 110000
TextToCode['北京市']['市辖区'].code 输出 110100
TextToCode['北京市']['市辖区']['朝阳区'].code 输出 110105
省市二级联动(不带“全部”选项):
<template>
<div id="app">
<el-cascader
size="large"
:options="options"
v-model="selectedOptions"
@change="handleChange">
</el-cascader>
</div>
</template>
<script>
import { provinceAndCityData } from 'element-china-area-data'
export default {
data () {
return {
options: provinceAndCityData,
selectedOptions: []
}
},
methods: {
handleChange (value) {
console.log(value)
}
}
}
</script>
省市二级联动(带“全部”选项):
<template>
<div id="app">
<el-cascader
size="large"
:options="options"
v-model="selectedOptions"
@change="handleChange">
</el-cascader>
</div>
</template>
<script>
import { provinceAndCityDataPlus } from 'element-china-area-data'
export default {
data () {
return {
options: provinceAndCityDataPlus,
selectedOptions: []
}
},
methods: {
handleChange (value) {
console.log(value)
}
}
}
</script>
省市区三级联动(不带“全部”选项):
<template>
<div id="app">
<el-cascader
size="large"
:options="options"
v-model="selectedOptions"
@change="handleChange">
</el-cascader>
</div>
</template>
<script>
import { regionData } from 'element-china-area-data'
export default {
data () {
return {
options: regionData,
selectedOptions: []
}
},
methods: {
handleChange (value) {
console.log(value)
}
}
}
</script>
省市区三级联动(带“全部”选项):
<template>
<div id="app">
<el-cascader
size="large"
:options="options"
v-model="selectedOptions"
@change="handleChange">
</el-cascader>
</div>
</template>
<script>
import { regionDataPlus } from 'element-china-area-data'
export default {
data () {
return {
options: regionDataPlus,
selectedOptions: []
}
},
methods: {
handleChange (value) {
console.log(value)
}
}
}
</script>
根据后端返回地区code显示城市名称
- CodeToText使用:
CodeToText['110000'] 输出 北京市
CodeToText['110105'] 输出 朝阳区
需要上来说需要返回省市区,但是CodeToText
只会返回最低层级地区码,因此需要翻译地区码。
// 地区码翻译 regionCode为后端返回地区码
getRegionCodeAry (regionCode) {
let selectedOptions = [];
// 获取地区码省市区组合
if (this.isNull(regionCode)) {
// 如果地区码为空,返回未注册信息
return "还未完善注册地信息。";
} else {
// 地区码非空
if (regionCode.substring(2, 6) === "0000") {
selectedOptions[0] = regionCode;
} else if (regionCode.substring(4, 6) === "00") {
selectedOptions[0] = regionCode.substring(0, 2) + "0000";
selectedOptions[1] = regionCode;
} else {
let province = regionCode.substring(0,2) + "0000";
let city = regionCode.substring(0,4) + "00";
selectedOptions[0] = province;
selectedOptions[1] = city;
selectedOptions[2] = regionCode;
}
// 根据省市区代码组合转化文本
let regionAry = Object.values(selectedOptions);
if (regionAry.length === 1) {
return "中国-" + CodeToText[regionAry[0]];
} else if (regionAry.length === 2) {
return "中国-" + CodeToText[regionAry[0]] + "-" + CodeToText[regionAry[1]];
} else if (regionAry.length === 3) {
return "中国-" + CodeToText[regionAry[0]] + "-" + CodeToText[regionAry[1]] + "-" + CodeToText[regionAry[2]];
}
}
},
或者用正则表达式判断也行,我这里记一下正则表达式的哦
getRegionCodeAry (regionCode) {
if (regionCode && regionCode.length == 6) {
if (/^\d{2}0{4}$/.test(regionCode)) {
// 省
return [regionCode, '']
} else if (/^\d{4}0{2}$/.test(regionCode)) {
// 市
let provinceCode = regionCode.substr(0, 2) + '0000'
return [provinceCode, regionCode, '']
} else {
// 区
let provinceCode = regionCode.substr(0, 2) + '0000'
let cityCode = regionCode.substr(0, 4) + '00'
return [provinceCode, cityCode, regionCode]
}
} else {
// 全部
return ['']
}
},