vue + element UI中国省市区级联数据
发布时间
阅读量：
阅读量
安装
npm install element-china-area-data -S使用
import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data'1、provinceAndCityData：是省市二级联动数据（不带“全部”选项）
2、regionData：是省市区三级联动数据（不带“全部”选项）
3、provinceAndCityDataPlus：是省市二级联动数据（带“全部”选项）
4、regionDataPlus：是省市区三级联动数据（带“全部”选项）
上述的"全部"选项绑定的value是空字符串"",相当于不选择省市区
5、CodeToText：是个大对象，属性是区域码，属性值是汉字
例如：CodeToText['110000’]输出 北京市
6、TextToCode： 是个大对象，属性是汉字，属性值是区域码
例如：
TextToCode [‘北京市’].code 输出 110000,
TextToCode [‘北京市’][‘市辖区’].code 输出110100,
TextToCode [‘北京市’][‘市辖区’][‘朝阳区’].code 输出110105
案例
【1】省市二级联动（不带“全部”选项）:
<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>【2】省市二级联动（带“全部”选项）:
import { provinceAndCityDataPlus} from 'element-china-area-data'
export default {
data() {
return {
options: provinceAndCityDataPlus,
selectedOptions: []
}
},
methods: {
handleChange(value) {
console.log(value)
}
}
}【3】省市区三级联动（不带“全部”选项）:
import { regionData} from 'element-china-area-data'
export default {
data() {
return {
options: regionData,
selectedOptions: []
}
},
methods: {
handleChange(value) {
console.log(value)
}
}
}【4】省市区三级联动（带“全部”选项）:
import { regionDataPlus} from 'element-china-area-data'
export default {
data() {
return {
options: regionDataPlus,
selectedOptions: []
}
},
methods: {
handleChange(value) {
console.log(value)
}
}
} options：代表当前省市区级联下拉框的数据类型
selectOptions： 绑定当前选中省市区的区域码 例如：当前选中的是广东省广州市， selectOptions绑定的值是[ "440000", "440100" ]全部评论 (0)
还没有任何评论哟~