最近做的項目公司需求是信息輸入頁設置地址跳轉下一頁后,再返回信息輸入頁查看信息時,地址要默認顯示前面選擇的地址,以此記錄下,需要小伙伴可以看看
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
如此就可以去用好這組件了,當然看源碼市了解最透徹的,如果有時間的話。