van-picker組件default-index屬性設(shè)置不生效踩坑及解決

更新時(shí)間：2023年01月17日 16:44:00 作者：weixin_45121510

這篇文章主要介紹了van-picker組件default-index屬性設(shè)置不生效踩坑及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

van-picker組件default-index屬性設(shè)置不生效

官方文檔：default-index 單列選擇時(shí)，默認(rèn)選中項(xiàng)的索引 number | string 0

defaultIndex 這個(gè)屬性只是一個(gè)初始值，

如果需要?jiǎng)討B(tài)改變 index索引：

建議使用 picker 實(shí)例的 setIndexes 方法

通過(guò) ref 可以獲取到 Picker 實(shí)例并調(diào)用實(shí)例方法，

setIndexes 設(shè)置所有列選中值對(duì)應(yīng)的索引 indexes -

// 1.給van-picker設(shè)置ref，如ref="van_picker"

	<van-popup v-model="showPicker" position="bottom">
		<van-picker
			show-toolbar  value-key="label"  ref="van_picker"
			:columns="columns"  :default-index="defaultBuIndex"
			@confirm="onConfirm" @cancel="showPicker = false"
		/>
	</van-popup>
	
// 2. 在需要的方法中調(diào)用：  

	 this.$nextTick(() =>{
		this.$refs.van_picker.setIndexes([0])    // 注意這里是數(shù)組[索引值]
	})

vant picker組件踩坑

vant Picker組件，不顯示頂部欄，change事件拿到的值有1-2s延遲問(wèn)題

ui設(shè)計(jì)如圖

在這里插入圖片描述

因需求要求，picker去掉頂部欄，點(diǎn)擊下方確認(rèn)按鈕的時(shí)候獲取選中的值

方法一

綁定change事件，選項(xiàng)改變時(shí)觸發(fā)（但是有1s的延遲，操作太快了會(huì)取不到值，不可?。?/p>

<van-picker
? ? :show-toolbar="true"
? ? :columns="reason"
? ? ref="picker"
? ? @change="change"
? />
? ? <div class="btn" @click="handlePopSubmit('reason')">確認(rèn)</div>


change（value）{
//單列：Picker 實(shí)例，選中值，選中值對(duì)應(yīng)的索引
//多列：Picker 實(shí)例，所有列選中值，當(dāng)前列對(duì)應(yīng)的索引
}

方法二

通過(guò)使用ref，調(diào)用ref的confirm方法（和方法一是一樣的，有1s的延遲，操作太快了會(huì)取不到值）

<van-picker
? ? :show-toolbar="true"
? ? :columns="reason"
? ? ref="picker"
? ? ref="pick"
? />
? <div class="btn" @click="handlePopSubmit('reason')">確認(rèn)</div>

handlePopSubmit(){
?? ?console.log('選中的值'，this.$refs.picker.getValues)
}

方法三

有點(diǎn)笨拙，但是不會(huì)出問(wèn)題

vant-picker的show-toolbar設(shè)置為true，但是在頁(yè)面上對(duì)頂部的導(dǎo)航欄樣式隱藏（例如:display：none）

<van-picker
? ? :show-toolbar="true"
? ? :columns="reason"
? ? ref="picker"
? ? @confirm="handleReasonChange"
? />
? <div class="btn" @click="handlePopSubmit('reason')">確認(rèn)</div>


handleReasonChange(value, index) {
//value ：選中的值 取值即可
//index： 下標(biāo) ??
? }

handlePopSubmit(){
?? ? let pickReason = (this.$refs.picker as any).$el.children[0].children[1]; //拿到頂部欄的確認(rèn)元素
? ? ? pickReason.click(); //執(zhí)行一下
?}

目前想到的解決辦法只有這三種！