最近使用vant UI寫移動端，感受還不錯 功能挺全的，帶的還有省市區三級聯動。vue
可是 忽然遇到一個 產品要傳的 省市區的code碼，還和vant的 郵編不同，我*****。git
看了一下vant UI提供的api有提供 Picker 選擇器的api，哇，內心美滋滋，可是我api提供的只有二級聯動，我****，沒事憑個人本事，琢磨個一兩個月還不是問題的，哈哈。github
開始======================>數據結構
首先看一下接口返回的數據結構吧，省市區三級聯動，每一級都帶的有code。dom
而後根據 vant Picker 選擇器的api 開寫。fetch
雖然vant Picker 選擇器的api，只提供了二級，可是咱們能夠模仿這寫一下三級。this
上代碼spa
<template>
<div class="user-login">
<van-field
readonly
clickable
label="城市"
placeholder="選擇城市"
@click="showPicker = true"
/>
<van-popup v-model="showPicker" position="bottom">
<!-- vant Picker 根據 綁定的columns數據，來渲染幾級聯動，這裏咱們使用的是三級聯動 -->
<van-picker v-if="pageShow" show-toolbar :columns="columns" @cancel="onCancel"
@confirm="onConfirm" @change="onChange" :item-height="35" />
</van-popup>
</div>
</template>
<script>
import Vue from 'vue';
import { Picker } from 'vant';
Vue.use(Picker);
import api from "../fetch/api";
export default {
name:"user-login",
data(){
return {
// columns 爲三個，即渲染出來的就是三級聯動。
columns: [
{
values: '',
className: 'column1'
},
{
values: '',
className: 'column2',
defaultIndex: 0
},
{
values: '',
className: 'column3',
defaultIndex: 0
}
],
pageShow:false, //省市區三級聯動是否顯示（由於是接口返回的數據，等省市區數據渲染完畢以後，在顯示三級聯動）
cityDates:'', //安聯當前選中市的全部區全部數據
showPicker:false, //vant Popup彈出框顯示隱藏
data:'',//接口返回全部省市區數據
}
},
beforeCreate(){
//這裏不要在乎 是咱們接口的簽名。
var args1 = this.sign({});
// 接口請求數據
api.getAnLianArea(args1).then(res => {
this.data = res.anLianAreaList;
// 默認展現一級的數據
this.columns[0].values = Object.values(res.anLianAreaList).map(function(e){
return {text:e.name,code:e.code}
})
// 默認展現二級的數據
this.columns[1].values = Object.values(res.anLianAreaList[0].anLianCityList).map(function(e){
return {text:e.name,code:e.code}
})
// 默認展現三級的數據
this.columns[2].values = Object.values(res.anLianAreaList[0].anLianCityList[0].anLianCountyList).map(function(e){
return {text:e.subcityNameZhs,code:e.subcityCode}
})
// 等待dom渲染完畢以後，在去顯示 三級聯動。
this.$nextTick(function(){
this.pageShow = true;
})
});
},
mounted(){
},
methods:{
// vant picker選擇器回調
onChange(picker, values,index) {
// 這裏我有可能渲染的有問題，致使回調每次都修改了當前列，其餘值沒有修改，當前列？？（當前列什麼鬼呀，什麼垃圾啊？？？） 解釋一下 ↓↓
// 由於vant的 van-picker 回調只會返回你修改的那一列，好比如今爲 [北京，北京，東城區]，你修改了省爲[天津市，天津市，和平區]，可是vant的change回調會獲得[天津市,北京,東城區],後面兩個在回調中沒有修改，不知道個人渲染方法有問題仍是什麼問題。
// 因此我在這裏判斷change事件觸發後，若是你修改了省份的話，回調裏面省份會改變，可是市和區仍是上一個省份的 市和區，這時咱們執行回調修改省，市，區的時候，由於回調只有省改變了，市和區DOM改變了，可是回調裏面沒改變的問題（不曉得什麼問題）,這時咱們去找省下面的 市，咱們取回調的市名稱，若是在省下面沒有找到這個市，默認展現第一個市，區也默認展現第一個市下面的區，若是遍歷市能查到，就去展現對應的市。
console.log(picker, values,index);
// 回調時修改第2列數據
picker.setColumnValues(1, this.cityDate(this.data,values[0].text));
// 回調時修改第3列數據
picker.setColumnValues(2, this.county(this.data,values[1].text));
},
// 修改市 這裏再也不多說什麼了根據本身的數據格式來
cityDate(data,province){
var that = this;
data.forEach(function(res){
if(res.name == province){
console.log(res)
that.cityDates = res;
}
});
return that.cityDates.anLianCityList.map(function(res){
return {text:res.name,code:res.code};
})
// return 返回數據格式，由於我須要省市區code，因此我return的格式是對象,例:[{text:'北京市',code:'1'},{text:'河南省',code:'2'},...],若是你不須要code直接這樣就能夠 例['北京市','河南省',.....]
},
// 修改縣 這裏再也不多說什麼了根據本身的數據格式來
county(data,county){
var that = this;
var countyDate = '';
// 由於vant的 van-picker 回調只會返回你修改的那一列，好比如今爲 [北京，北京，東城區]，你修改了省爲[天津市，天津市，和平區]，可是vant的change回調會獲得[天津市,北京,東城區],後面兩個在回調中沒有修改，不知道個人渲染方法有問題仍是什麼問題。
// 因此我在這裏判斷change事件觸發後，若是你修改了省份的話，回調裏面省份會改變，可是市和區仍是上一個省份的 市和區，這時咱們執行回調修改省，市，區的時候，由於回調只有省改變了，市和區DOM改變了，可是回調裏面沒改變的問題（不曉得什麼問題）,這時咱們去找省下面的 市，咱們取回調的市名稱，若是在省下面沒有找到這個市，默認展現第一個市，區也默認展現第一個市下面的區，若是遍歷市能查到，就去展現對應的市。
that.cityDates.anLianCityList.forEach(function(res){
if(res.name == county){
countyDate = res;
}
});
// 這裏若是沒有找到對應的縣
if(countyDate == ''){
countyDate = that.cityDates.anLianCityList[0];
}
// return 縣
return countyDate.anLianCountyList.map(function(res){
return {text:res.subcityNameZhs,code:res.subcityCode};
})
// return 返回數據格式，由於我須要省市區code，因此我return的格式是對象,例:[{text:'北京市',code:'1'},{text:'河南省',code:'2'},...],若是你不須要code直接這樣就能夠 例['北京市','河南省',.....]
},
onConfirm(val,a){
console.log(val)
},
onCancel(){
this.showPicker = false;
},
}
}
</script>
有大佬知道爲何，vant Picker回調爲何，dom渲染了，但回調只修改了當前列的數據（是否是我渲染的有問題）code
上面代碼能夠實現 三級聯動 傳 code。