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

2023-01-18 14:00:09

van-picker元件default-index屬性設定不生效

官方檔案：default-index 單列選擇時，預設選中項的索引 number | string 0

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

如果需要動態改變 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])    // 注意這裡是陣列[索引值]
	})

vant picker元件踩坑

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

ui設計如圖

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

方法一

繫結change事件，選項改變時觸發（但是有1s的延遲，操作太快了會取不到值，不可取）

<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(); //執行一下
 }

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

總結

以上為個人經驗，希望能給大家一個參考，也希望大家多多支援it145.com。

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

目錄

van-picker元件default-index屬性設定不生效

vant picker元件踩坑

方法一

方法二

方法三

總結

熱門文章