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)文章
vue Treeselect下拉樹只能選擇第N級元素實現(xiàn)代碼
這篇文章主要介紹了vue Treeselect下拉樹只能選擇第N級元素實現(xiàn)代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vue定時器清除不掉,導(dǎo)致功能頻繁執(zhí)行問題
這篇文章主要介紹了vue定時器清除不掉,導(dǎo)致功能頻繁執(zhí)行問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要介紹了vue中的stylus及stylus-loader版本問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了vue3+ts使用bus事件總線,文中給大家提到了vue總線機制(bus)的相關(guān)知識，本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-08-08
這篇文章主要介紹了vue項目中導(dǎo)入swiper插件的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要介紹了Vuex mutitons和actions初使用詳解，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
這篇文章主要介紹了vue3如何使用pinia替代vuex問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
將bmob js-sdk放在static目錄，然后在index.html頁面中已 script 標(biāo)簽的形式引入，就可以在vue中全局使用bmob js-sdk。下面通過本文給大家分享bmob js-sdk 在vue中的使用教程，需要的朋友參考下吧2018-01-01
今天小編就為大家分享一篇vue表單自定義校驗規(guī)則介紹，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要為大家詳細介紹了Vue+Element實現(xiàn)表格單元格編輯，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04