element 复杂表格数据处理


实现效果

数据返回结构

封装数据处理方法

数据处理方法代码

export const scaleMaintenancedata = (data) => { // author: 
  let newdata = JSON.parse(JSON.stringify(data));
  newdata.forEach((item,index) => {
     item['sorts'] = ['可研批复', '概算批复', '结算审价'];
     item['sorts_real_investment'] = [item.real_investment, item.budgetary_funds, item.info_examine_money];
     item['sorts_date'] = [item.info_feasibilityStudy_date, item.info_firstsetup_date, item.info_examine_date];
     item['sorts_docnum'] = [item.info_feasibilityStudy_docnum, item.info_firstsetup_docnum, '/'];
     item['sorts_tenlineadd'] = [item.scale_tenlineadd, item.scale_tenlineadd1, item.scale_tenlineadd2];
     item['sorts_tenlineupdate'] = [item.scale_tenlineupdate, item.scale_tenlineupdate1, item.scale_tenlineupdate2];
     item['sorts_smalllineadd'] = [item.scale_smalllineadd, item.scale_smalllineadd1, item.scale_smalllineadd2];
     item['sorts_smalllineupdate'] = [item.scale_smalllineupdate, item.scale_smalllineupdate1, item.scale_smalllineupdate2];
     item['sorts_distributionaddplatform'] = [item.scale_distributionaddplatform, item.scale_distributionaddplatform1, item.scale_distributionaddplatform2];
     item['sorts_distributionaddkva'] = [item.scale_distributionaddkva, item.scale_distributionaddkva1, item.scale_distributionaddkva2];
     item['sorts_distributionupdateplatform'] = [item.scale_distributionupdateplatform, item.scale_distributionupdateplatform1, item.scale_distributionupdateplatform2];
     item['sorts_distributionupdatekva'] = [item.scale_distributionupdatekva, item.scale_distributionupdatekva1, item.scale_distributionupdatekva2];
     item['sorts_switch'] = [item.scale_switch, item.scale_switch1, item.scale_switch2];
     item['sorts_meterboxadd'] = [item.scale_meterboxadd, item.scale_meterboxadd1, item.scale_meterboxadd2];
     item['sorts_meterboxupdate'] = [item.scale_meterboxupdate, item.scale_meterboxupdate1, item.scale_meterboxupdate2];
     item['sorts_meteradd'] = [item.scale_meteradd, item.scale_meteradd1, item.scale_meteradd2];
     item['sorts_meterupdate'] = [item.scale_meterupdate, item.scale_meterupdate1, item.scale_meterupdate2];
    //  item['sorts_distributionupdatekva'] = [item.scale_meteradd, item.scale_meteradd1, item.scale_meteradd2];
    //  item['sorts'] = ['可研批复', '概算批复', '结算审价'];
  })
  return newdata
}

相应页面导入封装方法

import { scaleMaintenancedata} from '@/utils/tools'

使用方法

在查询数据成功时,将后台返回的数据进行赋值处理

   this.tableData = this.scaleMaintenancedata(resdata.data);

table内使用


   // 重点
  
{{item}}
  
          
      
    
      
          
      
  
vue