需求:表格分别存在合计行(特殊样式),小计行(特殊样式),以及同类项目的列合并。el-table本身提供的方法就支持合并行或列,所以主要还是整理数据的功夫❗❗效果图如下:
ps:后台给的数据是一个数组,每一项是小计行的数据,明细数据塞在了小计行数据里,所以需要自己取出来再大整特整✊
渲染代码如下:
<el-table border :data="busiFinData" :span-method="arraySpanMethod" :cell-style="getCellStyle" > <el-table-column prop="_prop.finance_type" align="center" width="180"> </el-table-column> <el-table-column prop="prj_code" label="项目代码" width="180" align="center" > </el-table-column> <el-table-column prop="prj_name" label="项目名称" > </el-table-column> <el-table-column prop="_prop.expend_name" label="分项名称" align="center" > </el-table-column> <el-table-column prop="_prop.acc_name" label="发放项目" align="center" > </el-table-column> <el-table-column prop="busi_amt" label="应发金额(单位:元)" align="right" :formatter="el_tableCurrency" > </el-table-column> </el-table>
主要逻辑代码如下:
1、获取表格数据
// 加载表格 loadInaccApply(callback){ axios({ method: 'post', url: '/', data: { ajax: true, act: '', }, }).then(response => { let resp = response.data; if (resp.success) { // 支出明细 let busiList = resp.objectMap.busiList || []; let busiFin = [], busiTotal = 0; busiList.forEach( busi =>{ if(busi._prop.finance_type == '财政'){ this.$set(busi, 'sumSpan', true); // 小计行添加标志 busiFin.push(busi); busiTotal += busi.busi_amt*1; // 支出合计行金额 } }); // 获取表格渲染数据 this.busiFinData = this.getBusiTable(busiFin, busiTotal, '财政'); callback && callback(); } else { Valert({msg: resp.message}); } }).catch(error=> { Valert({msg:error}); }).finally(()=>{ this.loading = false; }); }, // 整理支出明细 getBusiTable(busi, amt, type){ let resultArr = []; for (let i=0; i<busi.length;i++){ let infoList = busi[i]._prop && busi[i]._prop.info_list.length ? busi[i]._prop.info_list:[]; // 具体明细 for(let j=0; j<infoList.length;j++){ resultArr.push(infoList[j]); } // 小计行 if(type == '财政'){ resultArr.push(busi[i]); } } // 自定义合计行 if(resultArr.length){ if(type == '财政'){ resultArr.unshift({'busi_amt':amt, 'totalSpan':true, _prop:{'finance_type':'财政支出合计', 'expend_name':'', 'acc_name':''} }); } } return resultArr; },
2、合并行和列
// 合并单元格 arraySpanMethod({ row, column, rowIndex, columnIndex }) { // 支出合计行 if(row.totalSpan){ if (columnIndex == 5) { return [1, 5]; } else if (columnIndex == 1 || columnIndex == 2 || columnIndex==3 || columnIndex==4 ) { return [0, 0]; } } // 小计行 if(row.sumSpan){ if (columnIndex == 5) { return [1, 4]; } else if (columnIndex == 2 || columnIndex==3 || columnIndex==4 ) { return [0, 0]; } } // 合并第一列 if(columnIndex == 0){ if (rowIndex == 1) { return { rowspan: this.busiFinData.length - 1, colspan: 1 }; } else if(rowIndex != 0) { return { rowspan: 0, colspan: 0 }; } } },// 行样式自定义 getCellStyle({ row, column, rowIndex, columnIndex }) { if (rowIndex === 0) { // 合计行样式 return 'font-size: 20px; color: #004A99;'; } else if (row.sumSpan) { // 小计行样式 return "background-color: #EFEFEF; color: #000000;"; } return ''; }
至此,大功告成😉