it资料抠wx:1113467806,免费赠送
1. 出现问题bug: el-cascader控件 最后一级出现空白 暂无数据
2. 问题原因分析
经过调试分析出现空级联原因是:由于数据是从后台传递过来的,当后端的哥们使用递归算出菜单,然后转换成json传递到前端的时候。就会出现 最底层 的子项中 的 children 为空数组,这样就会造成,空级联 的bug存在。
3. 解决办法: 使用递归的方式,将最底层中的 children设为undefined
3.1 html 代码
<el-cascader
:show-all-levels="false"
v-model="subCatValue"
:options="allSubCatList"
:props="optionProps"
@change="handleSubCat"
></el-cascader>
3.2 JS处理 代码
- 主要是 getTreeData 方法递归判断
- el-cascader 的 optionProps 属性可以根据后端的返回值映射为识别的对应值
export default {
data() {
return {
optionProps: {
value: 'id',
label: 'className',
children: 'subcat'
},// 格式化工单信息
allSubCatList:[], // 工单分类列表
subCatValue:[], // 工单分类值
},
};
},
methods: {
// 获取列表
getAllSubCatList(){
this.$axios.get(this.$httpServer.getAllSubCatList,{}).then((res)=>{
console.log(res);
if(res.status == "200"){
this.allSubCatList = this.getTreeData(res.data.data);
}
})
},
// 递归判断列表,把最后的children设为undefined
getTreeData(data){
for(var i=0;i<data.length;i++){
if(data[i].subcat.length<1){
// children若为空数组,则将children设为undefined
data[i].subcat=undefined;
}else {
// children若不为空数组,则继续 递归调用 本方法
this.getTreeData(data[i].subcat);
}
}
return data;
}
},
};
</script>
4. 解决后效果
5. 补充 通过id选择对应的名字(element-ui中cascader同时获取label和value值)
names =[ ] data = 递归树 (allSubCatList:[]) users 选中的id数组 (subCatValue:[])
diguiEvent(names,data,users){
var l = data.length;
for (var i = 0; i < l; i++) {
for(var j= 0;j<users.length;j++){
if(data[i].id==users[j]){
console.log(1)
names.push(data[i].name)
}
}
if(data[i].children && data[i].children.length > 0){
console.log(names,data[i].children,users,data[i].children.length)
this.diguiEvent(names,data[i].children,users)
}
}
},