area-select省市区三级联动、级联选择器

参考地址：Vue Area Linkage-中国省市区联动选择

【Vue】Vue+ElementUI中城市选择器的使用_四通一达小新星的博客-CSDN博客

一、安装

npm i --save vue-area-linkage

二、在main.js中导入，进行全局注册

import Vue from 'vue'
import { pca, pcaa } from 'area-data'; // v5 or higher
import 'vue-area-linkage/dist/index.css'; // v2 or higher
import VueAreaLinkage from 'vue-area-linkage';
Vue.use(VueAreaLinkage)

三、导入数据来源 ，在需要使用的页面。并在data()中 创建对应的参数进行接收即可

import { pca, pcaa } from 'area-data'; 
 data() {
 	return {
 		address1:[], // 接收数据的对象
        pca: pca,
        pcaa: pcaa
 	}
 }

<area-select type="all" :level="2" v-model="address1" :data="pcaa"></area-select>

问题：修改时需要根据后台返回的值回显到页面上

官网是这样赋值的

address1:['610000','610100','610113']     //陕西省西安市雁塔区

那我请求到后台数据后这样赋值

this.address1[0]=res.data[0].province
this.address1[1]=res.data[0].city
this.address1[2]=res.data[0].district

发现并不能回显

解决方式

<area-select v-if="isshow" type="all" :level="2" v-model="address1" :data="pcaa"></area-select>

this.isshow = false;
this.address1[0]=res.data[0].province
this.address1[1]=res.data[0].city
this.address1[2]=res.data[0].district
var t = setTimeout(() => {this.isshow = true},0);

就是在每次请求到数据复制后，通过v-if重新加载一下就OK了

问题：把数字变成汉字（'610000','610100','610113'）陕西省西安市雁塔区

this.address1[0] = pcaa[86][res.data[0].province]
this.address1[1] = pcaa[res.data[0].province][res.data[0].city]
this.address1[2] = pcaa[res.data[0].city][res.data[0].district]

级联选择器和省市区选择的实现

效果图：

实现方式：

1.安装

npm install element-china-area-data --save 

2.引入

import { regionData ,CodeToText} from 'element-china-area-data'

3.使用

<el-cascader v-model="areaArr" :options="options" :props="{ expandTrigger: 'hover' }"  @change="chooseArea"></el-cascader>

data(){
  return{
     options: regionData,

  }

}