mui多层级选择器picker踩坑

最新推荐文章于 2025-01-03 19:27:51 发布

caicai1171523597

最新推荐文章于 2025-01-03 19:27:51 发布

阅读量2.1k

点赞数 2

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/caicai1171523597/article/details/89877351

博主在使用mui前端框架做项目时，发现省市区三级联动选择器存在bug。按官方文档用setSelectedValue()方法设置选中值无效，多级选择器初始化时仅第一级生效。给出两种解决办法，一是用定时器，二是修改picker.js源码，还记录了参考链接。

最近用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后前端妹子一枚，爱阅读，爱交友，将工作中遇到的问题记录在这里，希望给每一个看到的你能带来一点帮助。
欢迎留言交流