最近的項(xiàng)目中涉及到省-市-縣/區(qū)三級聯(lián)動的功能實(shí)現(xiàn)，網(wǎng)上搜索了一圈，最后確定用了vue-area-linkage這個功能組件。現(xiàn)把使用方式及其中涉及到的問題記錄一下。
組件地址：vue-area-linkage
數(shù)據(jù)來源地址：area-data
1. 安裝：建議安裝v5及之后的版本
npm i --save vue-area-linkage area-data?
or
yarn add vue-area-linkage area-data?
2.按需引入：在需要使用的頁面引入以下數(shù)據(jù)
//pcaa為area-data的api
import pcaa from 'area-data/pcaa';
3. 使用
vue-area-linkage有兩種組件，一種是area-select,一種為area-cascader，兩種組件的展示形式如下：
area-select：
area-cascader：
4. 使用中遇到的問題
先放一下項(xiàng)目的展示效果,如下圖，城市要求為二級聯(lián)動，區(qū)/縣要求是單獨(dú)的下拉框。
<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?">
我實(shí)現(xiàn)的時候大致思路如下：在獲取到城市的值后，取出其對應(yīng)的編號，根據(jù)area-data提供的pcaa['130000']方式，獲取到該城市下的所有區(qū)/縣，得到一個對象 areaData，然后賦值給area-select的data。事實(shí)上我也是這么做的，但是實(shí)現(xiàn)的時候遇到了一些問題。
首先，我的area-select的level選擇的是0，它會默認(rèn)你是選擇的一級城市列表，而它的data數(shù)據(jù)要求是有格式的，所以，不能直接將拿到的areaData賦值給data，需要經(jīng)過處理。
this.areaData= { 86: pcaa[Object.keys(this.valCity[1])[0]] }
再者，數(shù)據(jù)格式正確了，賦值發(fā)現(xiàn)下拉還是沒有數(shù)據(jù)，查看組件源碼后發(fā)現(xiàn)，這個data并沒有監(jiān)控，也就是值改變的時候他不會重新渲染，所以，我使用了v-if這個條件，配合 this.$nextTick()方法，在數(shù)據(jù)改變的時候重新加載。
this.showArea = false?
this.countryData = { 86: pcaa[Object.keys(this.formValidate.valCity[1])[0]] }
this.$nextTick(() => {
? ? ? ? this.showArea = true
? ? ? })
這樣就實(shí)現(xiàn)了當(dāng)選擇完省市之后，區(qū)縣聯(lián)動的效果了。
