插件地址:element-china-area-data - npm (npmjs.com)
1.安装插件
npm install element-china-area-data -S
2. 字段讲解,按个人需求导入
import {
provinceAndCityData, //省市二级联动数据,汉字+code
pcTextArr, // 省市联动数据,纯汉字
regionData, // 省市区三级联动数据
pcaTextArr, // 省市区联动数据,纯汉字
codeToText // 是个大对象,属性是区域码,属性值是汉字 用法例如:codeToText['110000']输出北京市
} from 'element-china-area-data'
3.具体使用
<template>
<div>
<!--省市区三级联动数据 -->
<el-cascader
:options="options"
v-model="selectedOptions"
@change="handleChange"
>
</el-cascader>
{{ selectedOptions }}
<!-- 省市区联动数据,纯汉字 -->
<el-cascader
:options="optionss"
v-model="selectedOptionss"
@change="handleChanges"
>
</el-cascader>
{{ selectedOptionss }}
</div>
</template>
<script>
import {
provinceAndCityData, //省市二级联动数据,汉字+code
pcTextArr, // 省市联动数据,纯汉字
regionData, // 省市区三级联动数据
pcaTextArr, // 省市区联动数据,纯汉字
codeToText // 是个大对象,属性是区域码,属性值是汉字 用法例如:codeToText['110000']输出北京市
} from 'element-china-area-data'
export default {
data() {
return {
options: regionData,
optionss: pcaTextArr,
selectedOptions: [],
selectedOptionss: []
}
},
methods: {
// 省市区三级联动数据
handleChange(e) {
console.log(e) // ['11', '1101', '110101']
this.selectedOptions = e
},
// 省市区联动数据,纯汉字
handleChanges(e) {
console.log(e) // ['北京市', '市辖区', '东城区']
this.selectedOptionss = e
}
}
}
</script>
<style lang="less" scoped>
</style>