vue使用mui的picker,设置默认选项

一级选择示例如上图，如果后台给你的值（即默认值）不是第一个值，那么就需要设置默认值。而用vue的方式做，无论是第一次点开还是再次点开都是显示是第一个值，而不是你默认选择的那个值，这个时候怎么办呢？

 

   mui设置默认值如下两种方法：

1、setSelectedIndex(index[, duration, callback])

• 参数:index

  Type: Number

  指定列表选中项

  如:picker.pickers[0].setSelectedIndex(4)

• 参数:duration

  Type: Number

  过渡效果持续时间( ms )

  如:picker.pickers[0].setSelectedIndex(4,200)

• 参数:callback

  Type: FUnction

  设置成功回调

  如:picker.pickers[0].setSelectedIndex(4,200,function(){})

2、setSelectedValue(value[, duration, callback])

• 参数:value

  Type: String

  指定列表选中项

  如:picker.pickers[0].setSelectedValue('fourth')

• 参数:duration

  Type: Number

  渡效果持续时间( ms )

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

• 参数:callback

  Type: FUnction

  设置成功回调

  如:picker.pickers[0].setSelectedValue('fourth', 200, function(){})

• 如果用setSelectedIndex 设置，那么就要找到默认值所在数组的下标值，

• var List=[
                          {
                              text: '不需要费用'
                          }, {
                              text: 'AA付款',
                          }, {
                              text:'自由付款',
                          }
                      ];
                      var payTypeList = [];  //可以选择的列表实际上是一个数组
                      var index      //用index来记住给你的那个默认值的下标
                      for(var i=0;i<List.length;i++){
                          payTypeList.push(List[i]);
               
                              if (List[i].text === vm.data.PayType) {  //判断默认值=数组的元素，就可以拿到默认值下标
                                  index = i;
                              }
                          
                      }
                      var userPicker = new mui.PopPicker();
                      userPicker.setData(payTypeList);
                      if (!!vm.data.PayType) {     //默认值
                          userPicker.pickers[0].setSelectedIndex(index,800)
                      }
                      userPicker.show(function (items) {
                          vm.data.PayType = items[0].text;
                      });

• 如果用setSelectedValue 设置,那么就是默认值，数组就需要value属性，

•  var payTypeList=[
                          {
                              value: '不需要费用',
                              text: '不需要费用'
                          }, {
                              value: 'AA付款',
                              text: 'AA付款',
                          }, {
                              value: '自由付款',
                              text:'自由付款',
                          }
                      ]；
                      var userPicker = new mui.PopPicker();
                      userPicker.setData(payTypeList);
                      if (!!vm.data.PayType) {     //默认值
                          userPicker.pickers[0].setSelectedValue(vm.data.PayType, 200);  //vm.data.PayType数组的value值
                      }
                      userPicker.show(function (items) {
                          vm.data.PayType = items[0].text;
                      });