mui多层级选择器picker踩坑

2024年1月25日 468次阅读 来源: 菜菜___

最近用mui做项目，虽然号称最接近原生APP体验的高性能前端框架，但依然有bug，并且特别明显。
做省市区三级联动选择器时，按照官方文档提供的方法设置picker的选中值，一种是通过setSelectedIndex()方法，另一种是setSelectedValue()方法,使用第一种通过索引的时候没有问题，但是第二种通过值来设定的时候设置无效。
使用setSelectedIndex()方法设置如下：

var picker = new mui.PopPicker();
picker.setData([{
   value: "first",
   text: "第一项",
}, {
   value: "second",
   text: "第一项"
}, {
   value: "third",
   text: "第三项"
}, {
   value: "fourth",
   text: "第四项"
}, {
   value: "fifth",
   text: "第五项"
}])
picker.pickers[0].setSelectedIndex(4, 2000);

使用setSelectedValue()方法设置如下:

picker.pickers[0].setSelectedValue('fourth',200)

如果是单级选择器这样设置是没有问题的，但是多级选择器在刚进入页面初始化的时候这样设置便只有第一级生效，第二级、第三级不生效,如下市、区是不生效的：

// 设定省初始值  
cityPicker.pickers[0].setSelectedValue("320000");  
// 设定市初始值  
cityPicker.pickers[1].setSelectedValue("320200");  
// 设定区初始值  
cityPicker.pickers[2].setSelectedValue("320205");

解决办法
一：使用定时器

 setTimeout(function () {
        self.cityPicker.pickers[1].setSelectedValue(self.city);
        setTimeout(function () {
            self.cityPicker.pickers[2].setSelectedValue(self.district);
            console.log(self.cityPicker.getSelectedItems());
        });
    });

二：修改源码
对picker.js的代码进行修改。主要是修改了triggerChange部分的功能函数

Picker.prototype.triggerChange = function(callback) {  
        var self = this;  
        var index = self.getSelectedIndex();  
        var item = self.items[index];  

        if(index != self.lastIndex) {  
            $.trigger(self.holder, 'change', {  
                "index": index,  
                "item": item  
            });  
        }  
        self.lastIndex = index;  
        typeof callback === 'function' && callback();  
    };

方法二参考链接，没有做验证，在此先记录下。

原文作者技术博客：https://www.jianshu.com/u/ac4daaeecdfe
95后前端妹子一枚，爱阅读，爱交友，将工作中遇到的问题记录在这里，希望给每一个看到的你能带来一点帮助。
欢迎留言交流

    原文作者：菜菜___
    原文地址: https://www.jianshu.com/p/8f4a69e08d37
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞