頁(yè)面有三處選擇時(shí)間,共用一個(gè)picker組件伐蒂,再次選擇煞躬,保留著之前的數(shù)據(jù),怎么清除?
比如早餐選擇了7:00-9:00.
我選擇午餐恩沛,picker選擇器在扰,還是選擇7:00-9:00為選中狀態(tài)。
我希望打開午餐顯示00:00-00:00.
選擇完午餐雷客,比如11:30-13:30芒珠。
再點(diǎn)早餐是7:00-9:00,點(diǎn)午餐是11:30-13:30,再點(diǎn)晚餐搅裙,是00:00-00:00
如何實(shí)現(xiàn)皱卓?
home.vue頁(yè)面
++++++++++++++++++++++++++++++++++++++
?:lazy-render='false'是重點(diǎn)!3视睢:门馈!I摹4媾凇!
敲黑板蜈漓,否則在showPopFn無(wú)法得到picker組件實(shí)例穆桂,盡管用了nextTick也不行!H谒洹O硗辍!
<van-popup v-model="showPop" class="pop" :lazy-render='false' position="bottom" :style="{height: '40%' }" >
? <van-picker show-toolbar title="標(biāo)題" :columns="columns" @confirm="onConfirm" ref="mypicker" @cancel="hidePop"/>
</van-popup>
+++++++++++++++++++++++++++++++++++++++++
打開popup彈層時(shí)有额,給picker重新賦值般又,讓picker組件顯示之前選好的數(shù)據(jù)。
setColumnIndex兩個(gè)參數(shù)巍佑,第一個(gè)參數(shù)是你要改哪列茴迁,第二個(gè)參數(shù)是,你要改成啥
像我的時(shí)間是00:00 ——00:00
我有4列萤衰,我寫了4次6橐濉!4喽啊>肼簟!
showPopFn(type){
this.$nextTick(()=>{
if(type==1){
this.$refs.mypicker.setColumnIndex(0,this.breakfastIndex[0]);
? ? ? this.$refs.mypicker.setColumnIndex(1,this.breakfastIndex[1]);
? ? ? this.$refs.mypicker.setColumnIndex(2,this.breakfastIndex[2]);
? ? ? this.$refs.mypicker.setColumnIndex(3,this.breakfastIndex[3]);
? ? }else if(type==2){
this.$refs.mypicker.setColumnIndex(0,this.lunchIndex[0]);
? ? ? this.$refs.mypicker.setColumnIndex(1,this.lunchIndex[1]);
? ? ? this.$refs.mypicker.setColumnIndex(2,this.lunchIndex[2]);
? ? ? this.$refs.mypicker.setColumnIndex(3,this.lunchIndex[3]);
? ? }else if(type==3){
this.$refs.mypicker.setColumnIndex(0,this.dinnerIndex[0]);
? ? ? this.$refs.mypicker.setColumnIndex(1,this.dinnerIndex[1]);
? ? ? this.$refs.mypicker.setColumnIndex(2,this.dinnerIndex[2]);
? ? ? this.$refs.mypicker.setColumnIndex(3,this.dinnerIndex[3]);
? ? }
this.type=type;
? ? this.showPop=true;
? })
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++