element-ui 级联选择器使用bug
最近项目需要一个城市选择框，虽然网上有很多插件，但是项目数据库使用的city表和网上的不一致，所以我就自己写了城市的级联选择器。实现的效果如下图：
效果.gif
本来做好了很开心，可是测试人员反应说选择器拉到列表拉到底页面会卡死！我？？？一脸懵逼，一开始猜测是一次性加载的数据太大导致，但想一想，没理由大家的组件都可以加载的城市选择列表就我的数据量会过大呀。然后看选择器拉到页面底部，发现是最后一个选项是“台湾”
拉到底.gif
对比后台接口取出来的数据，我发现香港、澳门、台湾三个都没有返回子列表给我，我存进选择器数组的数据自然这三个选项也没有子列表，当选择器拉到香港时，因为没有子列表渲染数据，页面就出错了，直接导致了页面的崩溃……
....前面省略N行
/* 后台接口返回数据 */
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
找到了原因，我就直接将数据存在前端，然后对列表最后的这三组数据进行加工，解决了这个小bug：
....前面省略N行
/**
* @description 下面三项与数据库city表内容并不对应，
* 但是代码中截取的页面数据是children的value值，这与数据库是对应的
*/
{
'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
}]
}]
本来都想着要做异步加载数据了，还好本大爷机智，想到看看是不是数据出了问题，找到了真正出问题的地方。
PS：有没有哪位路过得的看官知道有什么检测bug的工具可以用么，欢迎留言告诉我。我现在写的项目只要有错页面就会卡死，都不知道是代码错还是后台返回数据不当导致的错误，找到导致错误的关键点好难T^T
