mint-ui Picker設置指定初始值


 

最近做的項目公司需求是信息輸入頁設置地址跳轉下一頁后,再返回信息輸入頁查看信息時,地址要默認顯示前面選擇的地址,以此記錄下,需要小伙伴可以看看

 

 data{return{}}中設置   :slots

 在mounted中設置this.$nextTick(將回調延遲到下次 DOM 更新循環之后執行。在修改數據之后立即使用它,然后等待 DOM 更新。),然后從session中拿到前面選擇的地址,

拿到省,Object.keys()會返回一個數組,當前省的數組,通過for循環找到這個省的序號,然后通過that.myAddressSlots[2].defaultIndex = i;即可設置之前選擇的省

 

然后地址值改變就會觸發綁定的change事件,change 事件有兩個參數,分別為當前 picker 的 vue 實例和各 slot 被選中的值組成的數組values,然后通過在 change 事件中,可以使用注冊到 picker 實例上的一些方法(文檔有說明):

  • setSlotValues(index, values):設定給定 slot 的備選值數組
values[0]為省,
values[1]為市
values[2]為區

通過setSlotValues設置市級備選值數組和區級備選值數組,picker.setSlotValues(1,Object.keys(myaddress[values[0]]));picker.setSlotValues(2,myaddress[values[0]][values[1]]);

  • setSlotValue(index, value):設定給定 slot 被選中的值,該值必須存在於該 slot 的備選值數組中

通過setSlotValue設置指定的市/區值,picker.setSlotValue(1,that.myAddressCity);picker.setSlotValue(2,that.myAddresscounty);即之前選擇的市/區,這里其實也可以繼續用defaultIndex來設置的,只是要for循環拿到市/區在備選值數組中的序號

that.myAddressSlots[2].defaultIndex = i;

 

總結下就是可以通過傳入 :slots="myAddressSlots",myAddressSlots的values傳入備選值數組或者通過setSlotValues設置備選值數組,然后通過defaultIndex來設置指定值或者通過setSlotValue(index, value)來設置指定值。

網上也有很多方法可以參考:http://www.cnblogs.com/zpxm/p/8670960.html   https://blog.csdn.net/SnowBeatRain/article/details/84646681

如此就可以去用好這組件了,當然看源碼市了解最透徹的,如果有時間的話。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM