關於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]);
        }
    }
}