最近的项目中涉及到省-市-县/区三级联动的功能实现，网上搜索了一圈，最后确定用了vue-area-linkage这个功能组件。现把使用方式及其中涉及到的问题记录一下。
组件地址：vue-area-linkage
数据来源地址：area-data
1. 安装：建议安装v5及之后的版本
npm i --save vue-area-linkage area-data
or
yarn add vue-area-linkage area-data
2.按需引入：在需要使用的页面引入以下数据
//pcaa为area-data的api
import pcaa from 'area-data/pcaa';
3. 使用
vue-area-linkage有两种组件，一种是area-select,一种为area-cascader，两种组件的展示形式如下：
area-select：
area-cascader：
4. 使用中遇到的问题
先放一下项目的展示效果,如下图，城市要求为二级联动，区/县要求是单独的下拉框。
<area-cascader :data="pcaa" v-model=" v-model="valCity" :value="areaCascader" :level="2" type="all" @change="getChangeVal">
<area-select v-model="valArea" :level="2" v-if="showArea" :value="areaSelect" type="all" @change="getChangeVal" :data="areaData ">
我实现的时候大致思路如下：在获取到城市的值后，取出其对应的编号，根据area-data提供的pcaa['130000']方式，获取到该城市下的所有区/县，得到一个对象 areaData，然后赋值给area-select的data。事实上我也是这么做的，但是实现的时候遇到了一些问题。
首先，我的area-select的level选择的是0，它会默认你是选择的一级城市列表，而它的data数据要求是有格式的，所以，不能直接将拿到的areaData赋值给data，需要经过处理。
this.areaData= { 86: pcaa[Object.keys(this.valCity[1])[0]] }
再者，数据格式正确了，赋值发现下拉还是没有数据，查看组件源码后发现，这个data并没有监控，也就是值改变的时候他不会重新渲染，所以，我使用了v-if这个条件，配合 this.$nextTick()方法，在数据改变的时候重新加载。
this.showArea = false
this.countryData = { 86: pcaa[Object.keys(this.formValidate.valCity[1])[0]] }
this.$nextTick(() => {
this.showArea = true
})
这样就实现了当选择完省市之后，区县联动的效果了。
