微信小程序官網只提供了省市區的三級聯動，實際開發中更多的是自定義的多級聯動：
依照微信小程序官網提供的自定義多級聯動，需要使用到picker 的多列選擇器，即設置 mode = multiSelector
https://developers.weixin.qq.com/miniprogram/dev/component/picker.html
在網上也找了資料，代碼都太繁瑣，並且對於頻繁變化的數據，非常不好維護；
代碼在git上有：https://github.com/jonyellow/code-diary/blob/master/%E5%B0%8F%E7%A8%8B%E5%BA%8F/picker/index.vue
直接上代碼，便於大家用：
1 html代碼：
<view class="section">
<view class="section__title">多列選擇器</view>
<picker mode="multiSelector" @columnchange="changeNextCol" :value="mulIndex" :range="mulArr">
<view class="picker">
當前選擇：{{mulArr[0][mulIndex[0]]}}，{{mulArr[1][mulIndex[1]]}}，{{mulArr[2][mulIndex[2]]}}
</view>
</picker>
</view>
2 data中return的數據
mulIndex: [0,0,0],
mulArr:[],
// 假設json為后端返回的數據
json: [{type:'汽車', brand:[{name:'領克',cars:['01', '02', '03']},
{name:'豐田',cars:['漢蘭達','凱美瑞', '卡羅拉']}]},
{type:'摩托車',brand:[{name:'雅馬哈',cars:['MT-9','迅鷹']},
{name:'鈴木',cars:['鑽豹','gw250']}]},
{type:'自行車',brand:[{name:'美利達',cars:['挑戰者300', '挑戰者900']},
{name:'捷安特',cars:['ATX777','XTR']}]}]
3 由於 mulArr中沒有數據，頁面加載后是沒有選項的，所以需要在onLoad是給mulArr加入數據
onLoad () {
// 初始化picker默認值
this.mulArr[0] = this.json.map(function(v){return v.type});
this.mulArr[1] = this.json[this.mulIndex[0]].brand.map(function(v){return v.name});
this.mulArr[2] = this.json[this.mulIndex[0]].brand[this.mulIndex[1]].cars;
}
4 關鍵的地方在於監聽用戶對列的改變 changeNextCol 函數
changeNextCol(e){
// 列的值改變時觸發 我這里是三列：車子類型 品牌名稱 車型
console.log('修改的列', e.target.column, '值為', e.target.value);
// 監聽用戶操作，改變mulIndex的值
this.mulIndex[e.target.column] = e.target.value;
// mulArr[0]的值是不會隨用戶操作變更的，因此不需要改變
// mulArr[1]的值是由 mulIndex[0]的值決定的
this.mulArr.splice(1,1,this.json[this.mulIndex[0]].brand.map(function(v){return v.name}));
// mulArr[2]的值是由 muIndex[1]的值決定的
this.mulArr.splice(2,1,this.json[this.mulIndex[0]].brand[this.mulIndex[1]].cars);
}
實際效果：
