最终效果图如下:
这里是后端返回的数据格式:
注释: 后端返回的json数据父级与子级必须要有层级关系
1. 通过后端返回数据绑定其级联数据源的值(父、子级同时展示 )
html代码块
<el-cascader v-model="consult.catalog"
:options="options"
:props="props"
collapse-tags
clearable>
//自定义显示列
<template slot-scope="{ node,data }">
//显示的十大分类名称以及材料名称
<span>{{data.fileNumber}}、{{ data.fileType}}</span>
</template>
</el-cascader>
js代码块
data() {
return {
options:[],
//poops 是用来绑定数据源的
props: {
multiple:true, //这里设置为多选模式
value: "id",
label: "fileType", //展示的lable名字
children:"children" //展示子级
},
consult: {
catalog:[],//目录
},
}
}
methods:{
list(){
request({
url: '/borrower/queryCatalog',
method: 'get',
params: {
eid: this.consult.browerid,
pid: this.consult.Brotype
}
}).then(res => {
if (res.data.code == 200) {
//给options进行赋值
this.options = this.getTreeData(res.data.data);
console.log('this.options', this.options );
} else if (res.data.code == 201) {
this.options = []
} else {
this.$message({message: '接口异常!', type: 'error'})
}
})
},
//递归判断列表,把最后的children设为undefined
getTreeData(data){
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;
},
}
1.到这里会出现问题bug: el-cascader控件 最后一级出现空白 暂无数据的解决方法
我这里是用递归来进行实现的,可以看上方代码块的 this.getTreeData()这个方法就可以,使用之后你就会发现期待的效果图已经实现啦!