美文网首页
组装el-cascader数据,一共2级,后台用2个接口返回的

组装el-cascader数据,一共2级,后台用2个接口返回的

作者: 流泪手心_521 | 来源:发表于2020-09-17 10:54 被阅读0次

    1.默认调用后台第一级(第一个接口)

    getSelectSection(){
            contentAuditAuthMngApi.getSelectSectionAndColumn().then(res=>{
              if(res.status==0){
                this.sectionSelect=res.data;
              }
            }) .catch((error) => {
              console.log( error)
            });
          },
    

    2.chenge的时候调用第二个接口(第二级的数据)

         contentAuditAuthMngApi.getselectAllColumn(val[0]).then(res=>{
              if(res.status==0){
                //二级数据改字段名称组装
                this.columnSelectChildren=[];
                for(let k=0; k<res.data.length;k++){
                  this.columnSelectChildren.push({
                    sectionCode:res.data[k].sectionColumnCode,
                    sectionName:res.data[k].sectionColumnName,
                  });
                }
                //最终组装的数据
                this.sectionSelect = this.sectionSelect.map(firstLevel=> {
                  if (firstLevel.sectionCode == val[0]) {
                    return Object.assign({}, firstLevel, {//注意这个方法,把一个数组添加多对象中,使用map,map可以返回一个新的数组,并且不修改原数组数据,然后在用Object.assign()此方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target)。Object.assign方法的第一个参数是目标对象,后面的参数都是源对象。
                      children: this.columnSelectChildren
                    })
                    } else {
                    return firstLevel
                  }
                });
                console.log(this.columnSelectChildren,'二级数据');
                console.log(this.sectionSelect,'最终的数据')
              }
            }) .catch((error) => {
              console.log(error)
            });
    

    相关文章

      网友评论

          本文标题:组装el-cascader数据,一共2级,后台用2个接口返回的

          本文链接:https://www.haomeiwen.com/subject/cjhlyktx.html