Element UI 中国省市区级联数据
发布时间
阅读量：
阅读量
这里写目录标题
- 安装流程
- 官网示例应用
-
-
省市区级联动机制（未选"所有"选项）：
-
省市区级联动机制（选"所有"选项）：
-
省市区级联动机制（未选"所有"选项）：
-
省市区级联动机制（选"所有"选项）
-
根据后端返回地区code显示城市名称
-
安装
npm install element-china-area-data -S官网例子使用
{ provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data'- provinceAndCityData被称作省市二级联动数据，并未包含"全部"选项
- regionData被称为省市区三级联动数据，并未配置"全部"选项
- provinceAndCityDataPlus被称为省市二级联动数据，并支持配置"全部"选项
- regionDataPlus被称为省市区三级联动数据，并支持配置"全部"选项
- "所有"项的绑定值设定为空字符串
- 此对象用于将区域代码转换为文字表示；示例：将其输入设置为1003，则输出将显示为"北京"
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 ['']
}
},全部评论 (0)
还没有任何评论哟~