關於mintui中picker的二級聯動

本日做的項目有個關於挑選部門再挑選職員的功用,我用到了min-ui的picker。
依據mintui的api

<mt-picker :slots="slots" @change="onValuesChange"></mt-picker>
export default {
  methods: {
    onValuesChange(picker, values) {
      console.log('change');
    }
  },
  data() {
    return {
      slots: [
        {
          flex: 1,
          values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'],
          className: 'slot1',
          textAlign: 'right'
        }, {
          divider: true,
          content: '-',
          className: 'slot2'
        }, {
          flex: 1,
          values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'],
          className: 'slot3',
          textAlign: 'left'
        }
      ]
    };
  }
};

會發明每次change,onValuesChange函數都會被挪用三次。大概是mintui默許內里有三個picker。
經由研討,能夠換一種寫法,增加兩個picker

<mt-popup v-model="pickerVisible" position="bottom" >
    <div class="picker-toolbar">
        <span class="mint-datetime-cancel" @click='cancel'>作廢</span>
        <span class="mint-datetime-confirm" @click='confirm'>肯定</span>
    </div>
    <mt-picker ref='pickerObj' :slots="slots" @change="onValuesChange" valueKey="name"></mt-picker>
    <mt-picker ref='pickerObj1' :slots="slots1" valueKey="name"></mt-picker>
</mt-popup>

選完一級,再獵取二級內容

data () {

return {
    slots: [
        {
          flex: 1,
          values: [],
          defaultIndex:0,
          className: 'slot1',
          textAlign: 'center'
        }, {
          divider: true,
          content: '-',
          className: 'slot2',
          textAlign: 'right'
        }
    ],
    slots1:[
        {
          flex: 1,
          values: [],
          defaultIndex:1,
          className: 'slot3',
          textAlign: 'center'
        }
    ]
}

}


onValuesChange(picker,values){
    if(values[0] && values[0].userlist != undefined){
        this.slots1[0].values = [];
        for(var key in values[0].userlist) {
            this.slots1[0].values.push(values[0].userlist[key]);
        }
    }
}
    原文作者:CcChan
    原文地址: https://segmentfault.com/a/1190000014559891
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞