如何设置Mint UI中Picker中的默认值

第一步：引入组件

js部分引入依赖

1
2
3
import { Popup, Picker} from "mint-ui";
Vue.component(Switch.name, Switch);
Vue.component(Popup.name, Popup);

在模板中引入

1
2
3
4
<mt-popup v-model="remindVisible" position="bottom" class="remind-popup">
  <mt-picker :slots="Minuteslots" @change="onRemindChange" :show-toolbar="true" v-model="remindMin">
  </mt-picker>
</mt-popup>

能够从上边的代码可以看出picker结合了popup使用。在使用picker的时候，有一个参数为slots，这个参数就是picker的备选值都有哪些，同时可以设置picker默认选中项，那么slots的参数在data中是这样设置的：

1
2
3
4
5
6
7
8
9
10
export default {
  data () {
    return {
      Minuteslots: [{
        values: ['未设置', '15分钟', '60分钟', '一天'],
        defaultIndex: 1
      }]
    }
  }
}

其中defaultIndex就是默认值的在values中的index值，言外之意就是picker默认选中的就是’15分钟’。
有一个问题就是如果是一个提交信息的页面，并且还可以提交后进行编辑，那么将返回的数据为picker的默认值，这个时候就用到双向绑定,v-model了，设置了一个remindMin变量，因为后端返回的数据和前端picker显示的不同，所以使用computed进行转换，并改变defaultIndex来改变picker中的默认值（picker中高亮的部分）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
computed: {
    remindMin () {
      switch(this.formObj.remindMinute) {
        case 0:
          this.Minuteslots[0].defaultIndex = 0
          return '未设置'
          break;
        case 15: 
          this.Minuteslots[0].defaultIndex = 1
          return '15分钟'
          break;
        case 60: 
          this.Minuteslots[0].defaultIndex = 2
          return '60分钟'
          break;
        case 1440: 
          this.Minuteslots[0].defaultIndex = 3
          return '一天'
          break;
        default: 
          return this.formObj.remindMinute
          break;
      }
    } 
  }

那么就做到了，当有后端返回的时候，我们通过计算属性来改变当前的默认值以及显示。

如果你有什么更好的方法，很开心能跟你交流，QQ:39004003 [笑脸]