在做项目时用到了uview中的picker创建多列联动,但是使用@columnchange并没有达到预期的效果,自己研究一会后发现@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的绑定值后才能正确触发下次@columnchange事件
this.selected[e.column] = e.index;
if (e.column == 0) {
// 此处是联动第二列的处理,如果判断是第一列进行了更改,就将this.data[1]改为联动后的第二列数据
}
},
}
}
</script>