mint ui picker 使用详解

mint ui picker 传参,取值及设置初始值

html部分
mt-picker组件上加个属性valueKey,设定显示的字段名:
valueKey=“name”,
组件上显示为name,

data部分
需要在data中设置defaultIndex,才可以在change事件中修改初始值

data(){
    return {
		slots: [
        {
          flex: 1,
          values: [{
            index:0,
            code:"",
            name:""
          }],
          className: 'slot1',
          textAlign: 'center',
          defaultIndex:0
        }
      ],
      slots2: [
        {
          flex: 1,
          values: [{
            index:0,
            code:"",
            name:""
          }],
          className: 'slot2',
          textAlign: 'center',
          defaultIndex:0
        }
      ],
       slots3: [
        {
          flex: 1,
          values: [{
            index:0,
            adCode:'',
            code:"",
            name:""
          }],
          className: 'slot3',
          textAlign: 'center',
          defaultIndex:0
        }
      ]
   }
}

change事件
注意:$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调,在修改数据之后使用 $nextTick,则可以在回调中获取更新后的 DOM,设置picker的初始值时放在nextTick里面

change事件中获取的values值为
{
index:0,
code:"",
name:""
}
格式,组件只显示name的值。

// 地址改变 省份
    onValuesChange(picker, values) {
      var that = this
      this.$nextTick(function () {  // 设置picker的初始值时放在nextTick里
        if (this.$route.query.editType == 'add') {
          this.slots[0].values.forEach((e,i) => {
              if(e.code == that.item.provincenum){
                that.slots[0].defaultIndex = e.index  // that.slots[0].defaultIndex设置picker的初始值
                if(values[0]){
                  this.address.province = values[0].name
                  this.address.provinceid = values[0].code
                  this.gocity(values[0])
                }
              
            })
        }
      })
      
      
    },

你可能感兴趣的:(前端插件,前端笔记)