element-ui 級聯(lián)選擇器使用bug
最近項目需要一個城市選擇框，雖然網(wǎng)上有很多插件，但是項目數(shù)據(jù)庫使用的city表和網(wǎng)上的不一致，所以我就自己寫了城市的級聯(lián)選擇器。實現(xiàn)的效果如下圖：
效果.gif
本來做好了很開心，可是測試人員反應(yīng)說選擇器拉到列表拉到底頁面會卡死！我？？？一臉懵逼，一開始猜測是一次性加載的數(shù)據(jù)太大導(dǎo)致，但想一想，沒理由大家的組件都可以加載的城市選擇列表就我的數(shù)據(jù)量會過大呀。然后看選擇器拉到頁面底部，發(fā)現(xiàn)是最后一個選項是“臺灣”
拉到底.gif
對比后臺接口取出來的數(shù)據(jù)，我發(fā)現(xiàn)香港、澳門、臺灣三個都沒有返回子列表給我，我存進選擇器數(shù)組的數(shù)據(jù)自然這三個選項也沒有子列表，當選擇器拉到香港時，因為沒有子列表渲染數(shù)據(jù)，頁面就出錯了，直接導(dǎo)致了頁面的崩潰……
....前面省略N行
/* 后臺接口返回數(shù)據(jù) */
31: {cityId: 810000, name: "香港", pid: 0, children: []}
children: []
cityId: 810000
name: "香港"
pid: 0
32: {cityId: 820000, name: "澳門", pid: 0, children: []}
children: []
cityId: 820000
name: "澳門"
pid: 0
33: {cityId: 930000, name: "臺灣", pid: 0, children: []}
children: []
cityId: 930000
name: "臺灣"
pid: 0
找到了原因，我就直接將數(shù)據(jù)存在前端，然后對列表最后的這三組數(shù)據(jù)進行加工，解決了這個小bug：
....前面省略N行
/**
* @description 下面三項與數(shù)據(jù)庫city表內(nèi)容并不對應(yīng)，
* 但是代碼中截取的頁面數(shù)據(jù)是children的value值，這與數(shù)據(jù)庫是對應(yīng)的
*/
{
'value': 811000,
'label': '香港',
'pid': 0,
'children': [{
'value': 810000,
'label': '香港',
'pid': 811000
}]
}, {
'value': 821000,
'label': '澳門',
'pid': 0,
'children': [{
'value': 820000,
'label': '澳門',
'pid': 821000
}]
}, {
'value': 931000,
'label': '臺灣',
'pid': 0,
'children': [{
'value': 930000,
'label': '臺灣',
'pid': 931000
}]
}]
本來都想著要做異步加載數(shù)據(jù)了，還好本大爺機智，想到看看是不是數(shù)據(jù)出了問題，找到了真正出問題的地方。
PS：有沒有哪位路過得的看官知道有什么檢測bug的工具可以用么，歡迎留言告訴我。我現(xiàn)在寫的項目只要有錯頁面就會卡死，都不知道是代碼錯還是后臺返回數(shù)據(jù)不當導(dǎo)致的錯誤，找到導(dǎo)致錯誤的關(guān)鍵點好難T^T
