实现如下效果：

1.安装Vue-area-linkage

npm i --save vue-area-linkage area-data

2.在mian.js里面注册

import VueAreaLinkage from 'vue-area-linkage';
import 'vue-area-linkage/dist/index.css'; 
Vue.use(VueAreaLinkage);

3.再具体使用的页面引入

import { AreaSelect } from "vue-area-linkage"
import { pca, pcaa } from 'area-data';

3.1组件中注册

components:{AreaSelect}

3.2同时data数据中定义

selected: [], //数组对应的就是选中的那个省市区。根据type来确定是省市区汉字的数组还是编码组成的数组。//selected[0]省。selected[1]市。selected[2]区。

pca: pca,

pcaa: pcaa,

showProvince:false,//控制省份控件是否展示

3.3 页面中使用

<area-select
:level="0"
v-model="selected"
:data="pca"
v-if="showProvince"
></area-select>

开发过程中遇到问题：

在使用的时候有个详情页面每次看到的就是某个人所在的地址。但是发现打开第一个窗口是对的，再打开第二个人的窗口还是显示第一个人的。

并且在调接口的时候js的里面赋值了，也强制刷新了，打印出来也是正确的。

最后就在里面写了一个v-if。相当于每次打开的时候重新加载，完美解决了问题。

 //清空已选择的地区
iscityShow() {
this.showProvince = false;
this.selected = [];
var t = setTimeout(() => {
this.showProvince = true;
}, 0);
console.log("this.selected1", this.selected);
},

点击确定，将数据传递给后台。

newForm.company_province = this.pcaa[86][this.selected[0]];
console.log("传递的省份", this.pcaa[86][this.selected[0]]);

编辑的时候从后台拿到数据,拿到的数据也是当初传的数据。

先调用iscityShow清空上次选择的省份，然后将省份添加到selected里面。

this.iscityShow();
if (this.form.company_province) {
this.selected.push(this.form.company_province);
this.$forceUpdate();
}

参考链接：https://blog.csdn.net/qq_33769914/article/details/82878693

最后

以上就是忐忑导师为你收集整理的vue中省份控件（VueAreaLinkage）的使用1.安装Vue-area-linkage2.在mian.js里面注册3.再具体使用的页面引入的全部内容，希望文章能够帮你解决vue中省份控件（VueAreaLinkage）的使用1.安装Vue-area-linkage2.在mian.js里面注册3.再具体使用的页面引入所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。