vue+element-ui Cascader 级联选择器 父级、子级 如何通过后端返回数据绑定其数据源呢且遇到无法选中值的问题解决办法？

最终效果图如下:

这里是后端返回的数据格式:
注释: 后端返回的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（）这个方法就可以，使用之后你就会发现期待的效果图已经实现啦！