vue 省市区三级联动选择 pc端项目插件element-china-area-data(非常推荐)
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element

·
使用步骤:
1.
npm install element-china-area-data -S
2.
import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data'
ps:
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="addressChange">
</el-cascader>
</div>
</template>
<script>
import { regionData,CodeToText } from 'element-china-area-data'
export default {
data () {
return {
options: regionData,
selectedOptions: []
}
},
methods: {
addressChange(arr) {
console.log(arr);
console.log(CodeToText[arr[0]], CodeToText[arr[1]], CodeToText[arr[2]]);
},
}
}
</script>
配图(带‘全部’选项):
附上官网链接:传送门




A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 天前 )
c345bb45
1 年前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 1 年前
更多推荐
所有评论(0)