Vant?Weapp組件picker選擇器初始默認選中問題
更新時間：2023年01月18日 08:36:26 作者：bujibuji哇
這篇文章主要介紹了Vant?Weapp組件picker選擇器初始默認選中問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
Vant Weapp組件picker選擇器初始默認選中
小程序使用vant-picker多列數(shù)據(jù)級聯(lián)選擇設(shè)置初始默認選中通過this.xx修改對應(yīng)列defaultIndex的不生效，數(shù)據(jù)改變頁面未渲染
解決
在onReady()方法中通過selectComponent方法獲取picker實例再調(diào)用官方文檔的setColumnIndex方法
注：wepy中獲取組件實例寫法為this.$wxpage.selectComponent()
代碼示例：
<van-picker
? ? ? ? class="labelPicker"
? ? ? ? show-toolbar
? ? ? ? title="選擇我的標(biāo)簽"
? ? ? ? columns="{{ columns }}"
? ? ? ? bind:cancel="onLabelCancel"
? ? ? ? bind:confirm="onLabelConfirm"
? ? ? ? bind:change="onLabelTypeChange"
? ? ? />onReady () {
? ? ? dept.forEach(item => {
? ? ? ? if (item.dept_bm === this.deptCode) {
? ? ? ? ? const picker = this.$wxpage.selectComponent('.labelPicker') // 獲取組件實例
? ? ? ? ? picker.setColumnIndex(0, dept.indexOf(item))
? ? ? ? }
? ? ? })
? ? }Van-picker選擇器空白
van-picker綁定的數(shù)據(jù)實在store里，在store里數(shù)據(jù)格式也是正確的，但是到頁面里picker的選擇項就是全空白，
在該路由中將該組件的keepalive設(shè)為了true,所以從別的頁面回來的時候，picker綁定的數(shù)據(jù)不會重新獲取，而該組件在初始的created里將picker的數(shù)據(jù)項寫為了空數(shù)組，此時只需要在activated生命周期里重新給picker綁定的數(shù)據(jù)重新進行取值操作即可。
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
詳解mpvue scroll-view自動回彈bug解決方案
設(shè)置了scroll-top的scroll-view組件，在組件所在vue實例data發(fā)生改變時會自動回彈到最上方，非常具有實用價值，需要的朋友可以參考下2018-10-10
在vue框架下使用指令vue add element安裝element報錯問題
這篇文章主要介紹了在vue框架下使用指令vue add element安裝element報錯問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
本文主要介紹了vue 面包屑導(dǎo)航組件封裝，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
這篇文章主要為大家詳細介紹了vue實現(xiàn)web滾動條分頁，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了antd form表單中如何嵌套自定義組件問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
基于Vue2實現(xiàn)的仿手機QQ單頁面應(yīng)用功能(接入聊天機器人 )
這篇文章主要介紹了基于Vue2實現(xiàn)的仿手機QQ單頁面應(yīng)用功能(接入聊天機器人 ),非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-03-03
vuex+axios+element-ui實現(xiàn)頁面請求loading操作示例
這篇文章主要介紹了vuex+axios+element-ui實現(xiàn)頁面請求loading操作,結(jié)合實例形式分析了vuex+axios+element-ui實現(xiàn)頁面請求過程中l(wèi)oading遮罩層相關(guān)操作技巧與使用注意事項,需要的朋友可以參考下2020-02-02
詳解vue與后端數(shù)據(jù)交互(ajax)：vue-resource
本篇文章主要介紹了詳解vue與后端數(shù)據(jù)交互(ajax)：vue-resource，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-03-03
this.$emit()的作用大家應(yīng)該也都知道,主要用于子組件像父組件傳值,這篇文章主要給大家介紹了關(guān)于vue中this.$emit使用方法的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-02-02
這篇文章主要介紹了vue3引入uview-plus3.0移動組件庫的流程,本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-06-06