首先 npm install element-china-area-data 或者 cnpm install element-china-area-data
引入：import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data'
注释：/*provinceAndCityData是省市二级联动数据（不带“全部”选项）
regionData是省市区三级联动数据（不带“全部”选项）
provinceAndCityDataPlus是省市区三级联动数据（带“全部”选项）
regionDataPlus是省市区三级联动数据（带“全部”选项） "全部"选项绑定的value是空字符串""
CodeToText是个大对象，属性是区域码，属性值是汉字 用法例如：CodeToText['110000']输出北京市
TextToCode是个大对象，属性是汉字，属性值是区域码 用法例如：TextToCode['北京市'].code输出110000,TextToCode['北京市']['市辖区'].code输出110100,TextToCode['北京市']['市辖区']['朝阳区'].code输出110105 */
省市区三级联动（不带“全部”选项）代码：
<template>
<el-form :model="form" :rules="rules" ref="ruleForm">
<el-form-item label="地理位置" prop="selectedOptions">
<el-cascader size="large" :options="options" v-model="form.selectedOptions" @change="handleChange" style="40%;"></el-cascader>
</el-form-item>
</el-form>
</template>
<script>
import { regionData,CodeToText } from 'element-china-area-data'
export default {
data() {
return {
form: {
selectedOptions:[],
provinceId:null,
provinceName: "", //省
cityId:null,
cityName: "", //市
regionId:null,
regionName: "", // 区,
},
rules: {
selectedOptions: [
{ required: true, message: '请选择地理位置', trigger: 'change' }
],
},
options: regionData,
selectedOptions:[],
CodeToText:CodeToText,
}
},
methods: {
handleChange (value) {
this.form.provinceId = value[0]
this.form.provinceName = CodeToText[value[0]]
this.form.cityId = value[1]
this.form.cityName = CodeToText[value[1]]
this.form.regionId = value[2]
this.form.regionName = CodeToText[value[2]]
},
},
}
</script>