<template>
<u-picker :show="timeshow" ref="uPicker" :columns="columns" @confirm="confirm" @change="changeHandler"></u-picker>
</template>
<script>
export default {
data() {
return {
timeshow: true,
timevalue:"",
columns: [
['今天', '明天'],
['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10',
'11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24'
],
['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10',
'11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24',
'25','26','27','28','29','30','31','32','33','34','35','36','37','38','39',
'40','45','46','47','48','49','50','51','52','53','54','55','56','57','58','59','60',
],
],
}
},
methods: {
changeHandler(e) {
const {
columnIndex,
value,
values, // values为当前变化列的数组内容
// index,
// 微信小程序无法将picker实例传出来，只能通过ref操作
picker = this.$refs.uPicker
} = e
// 当第一列值发生变化时，变化第二列(后一列)对应的选项
if (columnIndex === 0) {
// picker为选择器this实例，变化第二列对应的选项
picker.setColumnValues(1, this.columnData[index])
}
},
// 回调参数为包含columnIndex、value、values
confirm(e) {
console.log('confirm', e.value)
console.log(e.value[1] +":"+e.value[2])
this.show = false
}
}
}
</script>