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

如此就能夠去用好這組件了，固然看源碼市瞭解最透徹的，若是有時間的話。