vue中element-china-area-data依赖和element-plus级联选择器构建省市区三级联动
效果：
1.vue安装element-china-area-data
npm install element-china-area-data -S
引入依赖：
import {regionData, CodeToText } from 'element-china-area-data'
2.elementplus级联选择器
<el-cascader></el-cascader>
3.代码：
<template><div><h1>三级联动和级联选择器的使用</h1><el-cascader :options='options' v-model='selectedOptions' @change='addressChange'></el-cascader></div></template><script>import {regionData, CodeToText } from 'element-china-area-data'export default {name: 'addaddress',data(){return{options: regionData,//不带‘全部’的三级联动//selectedOptions: "请选择",//或者写字符串，不影响数组格式。selectedOptions:['110000', '110100', '110101'] //这里给一个默认省市区}},methods:{addressChange (arr) {// console.log(this.selectedOptions) // Proxy {0: '120000', 1: '10', 2: '11'}// console.log(arr) // Proxy {0: '120000', 1: '10', 2: '11'} 和上句一样var addressText=CodeToText[arr[0]]+CodeToText[arr[1]]+CodeToText[arr[2]]console.log(addressText) // addressText为el-cascader的值 北京市 市辖区 朝阳区}} }</script><style scoped></style>
4.实际应用
因为省市区三级联动并不是单独使用的，它做为地址中选择省市区时的功能必然在一个承载用户信息的表单里用于地址的一部分。
例如这样：
<template><div><!-- 添加地址表单 --><el-form ref="add_address" :model="add_address" label-width="120px"><h5>{{add_address.title}}</h5><el-form-item label="姓名" prop="name"><el-input v-model="add_address.name" ></el-input></el-form-item><el-form-item label="电话" prop="tel"><el-input v-model="add_address.tel" ></el-input></el-form-item><!--1. 三级联动放在表单项里面 --><el-form-item label="省市区" prop="selectedOptions"><el-cascader :options='options' v-model='add_address.selectedOptions' @change='addressChange'></el-cascader></el-form-item><!--2. 省市区下的详细地址另写一个变量表示 --><el-form-item label="详细地址" prop="detailaddress"><el-input v-model="add_address.detailaddress" ></el-input></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">保存</el-button><el-button @click="clear('add_address')">取消</el-button></el-form-item><!--5. 展示省市区+详细地址： -->展示省市区+详细地址：{{ addressText}}{{detailaddress}}</el-form></div></template><script>// 引入表单import {reactive } from 'vue'//引入省市区import {regionData, CodeToText } from 'element-china-area-data'export default{name:"addresslist",data(){return{address_list:[],add_address:{title:'添加地址',name:'',tel:'',//3.selectedOptions放进表单对象selectedOptions:['110000', '110100', '110101'], addressText:'北京市市辖区东城区', //4.1省市区的文字，另设addressText通过函数赋值得到。selectedOptions只能在它本身的框中展示，不能作为文字展示变量。detailaddress:'', },options: regionData,}},methods:{//4.2省市区的文字 函数 得到省市区的文字赋值给data的add_address.addressTextaddressChange (arr) {// 此句为el-cascader的值 var addressText=CodeToText[arr[0]]+CodeToText[arr[1]]+CodeToText[arr[2]]console.log(addressText)this.add_address.addressText=addressText},}}</script>
