Element UI 省市区级联数据
发布时间
阅读量：
阅读量
在应用Element.js框架时... 通常建议采用中国的省级、市级、区级三级联动选择框。可以选择Element官方提供的相关插件库来实现这一功能。例如可以通过npm命令安装该插件库。
npm install element-china-area-data -S2.在你使用的vue页面引入js：
//import的大括号{}中参数随你需要省市的参数格式而改变
import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode }
from 'element-china-area-data'3.Tips：
- provinceAndCityData是省市二级联动数据（不带“全部”选项）
- regionData是省市区三级联动数据（不带“全部”选项）
- provinceAndCityDataPlus是省市区三级联动数据（带“全部”选项）
- regionDataPlus是省市区三级联动数据（带“全部”选项）
- "全部"选项绑定的value是空字符串""
- CodeToText是个大对象，属性是区域码，属性值是汉字 用法例如：CodeToText['110000']输出北京市TextToCode是个大对象，属性是汉字，属性值是区域码 用法例如：TextToCode['北京市'].code输出110000,TextToCode['北京市']['市辖区'].code输出110100,TextToCode['北京市']['市辖区']['朝阳区'].code输出110105
- 输出广东省：CodeToText['440000']
- 输出广州市：CodeToText['440100']
- 输出广东省code：TextToCode['广东省'].code；
- 输出广州市code：TextToCode['广东省']['广州市'].code；//市级需要两个【】括号，不然会报错
输出广州市黄埔区：TextToCode['广东省']['广州市']['黄埔区'].code；//区级需要三个【】括号，不然会报错
4.页面使用：
<template>
<div id="app">
<el-cascader size="large" :options="options" v-model="selectedOptions" @change="handleChange"></el-cascader>
</div>
</template>
<script>
import {provinceAndCityData, CodeToText,TextToCode} from 'element-china-area-data'
export default {
data () {
return {
//参保单位所在省市，选择集合
options: provinceAndCityData,//import中导入的数据，在这里调用
//选中值/默认值
selectedOptions: []
}
},
methods: {
handleChange (value) {
console.log(value) // value值为区域码
// 用CodeToText转换成中文
console.log(CodeToText[value[0]])
console.log(CodeToText[value[1]])
}
},
created(){
//改变省市默认值
this.selectedOptions=["440000","440100"];
})
}
</script>全部评论 (0)
还没有任何评论哟~