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

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

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

van-picker組件default-index屬性設置不生效

官方文檔：default-index 單列選擇時，默認選中項的索引 number | string 0

defaultIndex 這個屬性只是一個初始值，

如果需要動態(tài)改變 index索引：

建議使用 picker 實例的 setIndexes 方法

通過 ref 可以獲取到 Picker 實例并調用實例方法，

setIndexes 設置所有列選中值對應的索引 indexes -

// 1.給van-picker設置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. 在需要的方法中調用：  

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

vant picker組件踩坑

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

ui設計如圖

在這里插入圖片描述

因需求要求，picker去掉頂部欄，點擊下方確認按鈕的時候獲取選中的值

方法一

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

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


change（value）{
//單列：Picker 實例，選中值，選中值對應的索引
//多列：Picker 實例，所有列選中值，當前列對應的索引
}

方法二

通過使用ref，調用ref的confirm方法（和方法一是一樣的，有1s的延遲，操作太快了會取不到值）

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

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

方法三

有點笨拙，但是不會出問題

vant-picker的show-toolbar設置為true，但是在頁面上對頂部的導航欄樣式隱藏（例如:display：none）

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


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

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

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