在使用微信小程式picker組件時候，可以設定屬性 mode = multiSelector 意為多列選擇，關聯選擇，當第一列發生改變時侯，第二列甚至第三列發生相應的改變，但是官方檔案上給的只有三列資料關聯改變，沒有兩列改變得，我在寫的時候琢磨了很久官方檔案，于是寫下此篇檔案，作為總結，
結構檔案
<picker mode="multiSelector" bindchange="PickerChange" bindcolumnchange="PickerColumnChange" value="https://www.cnblogs.com/jickma/p/{{multiIndex}}" range="{{multiArray}}">
<view >
{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}
</view>
</picker>
bindcolumnchange 為每一列改變時候觸發的函式，引數為 e ，
bindchange 為最終選中之后觸發函式，引數為 e，
range 為系結陣列
js檔案
data: {
multiArray: [['飛禽', '走獸'], ['鷹', '鴿子', '麻雀', '鸚鵡']],
multiIndex: [0, 0],
arrColumn0: ['鷹', '鴿子', '麻雀', '鸚鵡'],
arrColumn1: ['兔子', '獅子', '獵狗']
},
PickerChange(e) {
var value = https://www.cnblogs.com/jickma/p/e.detail.value
this.setData({
multiIndex: value
})
console.log(this.data.multiArray[0][value[0]], this.data.multiArray[1][value[1]])
},
PickerColumnChange(e) {
// 先定義資料，陣列里面兩個陣列，意為兩列，當第一列發生改變時侯，給陣列重新賦值
var obj = e.detail
var multiArray = this.data.multiArray
if (obj.column == 0 && obj.value == 0) {
multiArray[1] = this.data.arrColumn0
}
if (obj.column == 0 && obj.value == 1) {
multiArray[1] = this.data.arrColumn1
}
this.setData({
multiArray: multiArray
})
},
設計思路
multiArray 為彈出層顯示資料，為一個陣列，陣列里面有幾個陣列，就是顯示幾列，我這是兩個陣列，即為顯示兩列，
multiIndex 為最終選中得資料索引，是函式 PickerChange 引數 e 里面包含得陣列
e.detail.value 有兩列，即會回傳 [1,2] , 前面得 1 表示為，最終選擇第一列得陣列中索引為 1 對應的那個值，后邊得 2 表示為，最終選中得為第二列資料中索引為 2 對應的值
arrColumn0 和 arrColumn1，是我定義得陣列，可以從后臺直接獲取，但是一定要在 picker 組件彈出來之前，附上值， multiArray 同理也可以這樣賦值，
PickerColumnChange 函式，當每一列改變時候都會觸發這個函式，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/194175.html
標籤：JavaScript
上一篇：循序漸進VUE+Element 前端應用開發(23）--- 基于ABP實作前后端的附件上傳，圖片或者附件展示管理