在做項目時用到了uview中的picker創(chuàng)建多列聯(lián)動,但是使用@columnchange并沒有達(dá)到預(yù)期的效果,自己研究一會后發(fā)現(xiàn)@columnchange需要和default-selector一起使用才可以器净,這一點官方的文檔并沒有重點說明姜挺。
比如:
<u-picker v-model="show" mode="multiSelector" :default-selector='selected' :range="data" @columnchange="change"></u-picker>
<script>
export default {
data() {
return {
show: false,
data: [
[],
[]
],
selected: [0, 0],
}
},
methods: {
change(e) {
// 只有修改了default-selector的綁定值后才能正確觸發(fā)下次@columnchange事件
this.selected[e.column] = e.index;
if (e.column == 0) {
// 此處是聯(lián)動第二列的處理,如果判斷是第一列進(jìn)行了更改帝火,就將this.data[1]改為聯(lián)動后的第二列數(shù)據(jù)
}
},
}
}
</script>