從不聯動元件到今天，很久沒釋出文章了，一方面是過年，一方面是沒有靜下來好好寫完聯動的picker元件。資料處理斷斷續續理了好幾天，到今天才完善，還有是因為zed幫忙做了點還幫忙釋出了npm。
聯動其實跟沒聯動思路一樣的，只是把聯動的資料處理成不聯動的，只是另外要加一些改變。
首先是資料格式：
[{
value: '一列1',
data: [{
value: '二列1',
data: [{
value: '三列1'
}]
}]
},
{
value: '一列2',
data: [{
value: '二列2',
data: [{
value: '三列00'
}]
}, {
value: '二列2',
data: [{
value: '三列11'
}]
}]
},
{
value: '一列3',
data: [{
value: '二列3'
}]
},
{
value: '一列4',
data: [{
value: '二列4',
data: [{
value: '三列4',
}]
}]
},
]
複製程式碼初始化的時候我先處理出第一個陣列，預設選中的都是0，然後根據第一個得到聯動的資料json。第一列變，之後的都要初始化為0，第二列變，第二列之後的要變成0，使用遞迴構造出陣列：
當我們第一列改變的時候，第二列開始往下都要滾動到0的位置，以此類推，需要加一個迴圈：
然後樣式做了一些修改，在IOS上面滾動會卡，加個屬性：
-webkit-overflow-scrolling: touch;
另外因為省市區有些地名太長了，就給超出省略了。最後就是返回的陣列是選中的value，不是index。如果想要禁止滾動穿透，可以使用這個包裡面function裡面的disableScroll方法，引入之後在mounted禁止，然後destroy的時候允許滾動。
在pickerLink下附帶了省市區資料，需要的可以使用。
效果：
其實還是希望想要使用的可以下載下來之後自己修改自己想要的效果，真的都不難。已經發布npm:
歡迎關注Coding個人筆記公眾號