关于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]);
        }
    }
}