uview多列picker使用@columnchange无法正确触发事件解决

在做项目时用到了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>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容