使用element-ui级联选择器的详细过程请参考------------》element-ui之级联选择器的使用详细过程
在使用element-ui级联选择器的过程中,发现出现 空级联 的bug
首先我们分析出现空级联原因是:由于数据是从后台传递过来的,当后端的老铁使用递归算出菜单,然后转换成json传递到前端的时候。就会出现 最底层 的子项中 的 children 为空数组,这样就会造成,空级联 的bug存在。
解决办法: 在前台js代码中,同样使用递归的方式,将最底层中的 children设为undefined
HTML部分:
<el-cascader
:change-on-select="true"
:props="defaultParams"
:options="options"
></el-cascader>
JavaScript部分:
// 获取级联选择器数据
getProductType(){
// 这是从后台获取数据
this.$http.get("/product/productType/tree")
.then(res=>{
// 调用递归方法,去除级联数据后将数据赋值给级联选择器
this.options=this.getTreeData(res.data);
});
},// 递归方法
getTreeData(data){
// 循环遍历json数据
for(var i=0;i<data.length;i++){
if(data[i].children.length<1){
// children若为空数组,则将children设为undefined
data[i].children=undefined;
}else {
// children若不为空数组,则继续 递归调用 本方法
this.getTreeData(data[i].children);
}
}
return data;
}