本日做的項目有個關於挑選部門再挑選職員的功用,我用到了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]);
}
}
}