前端vue三级联动组件之vue-area-linkage

最近的项目中涉及到省-市-县/区三级联动的功能实现，网上搜索了一圈，最后确定用了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-select

area-cascader：

area-cascader

4. 使用中遇到的问题

先放一下项目的展示效果,如下图，城市要求为二级联动，区/县要求是单独的下拉框。

城市下拉效果

区/县下拉效果

我实现的时候大致思路如下：在获取到城市的值后，取出其对应的编号，根据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

      })

这样就实现了当选择完省市之后，区县联动的效果了。