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

Posted on by

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

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

總結

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：