效果:
需求:用户可以根据每个表格要显示的计算方法写不同的代码进行运算。
在el-table加上show-summary,表示显示末尾计算。
自定义合计逻辑在el-table加:summary-method=“getSummaries”。
最后在methods;里面定义getSummaries方法。
代码:
<el-table
v-loading="loading"
:data="salaryList"
show-summary
:summary-method="getSummaries"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center" />
<!-- <el-table-column label="表格序列" align="center" prop="numberId" />-->
<el-table-column label="用户姓名" align="center" prop="userName" />
<el-table-column label="工资序号" align="center" prop="userId" />
<el-table-column label="工资号" align="center" prop="salaryId" />
<el-table-column label="基础保障工资" align="center" prop="basicSalary" />
<el-table-column label="技术津贴" align="center" prop="technicalAllowance" />
<el-table-column label="生活费补贴" align="center" prop="livingAllowance" />
<el-table-column label="交通费补贴" align="center" prop="trafficAllowance" />
<el-table-column label="误餐费补贴" align="center" prop="mealDelayAllowance" />
<el-table-column label="卫生费" align="center" prop="healthFee" />
<el-table-column label="图书补助费" align="center" prop="bookFee" />
<el-table-column label="其他津贴" align="center" prop="otherAllowance" />
<el-table-column label="夜班津贴" align="center" prop="nightAllowance" />
<el-table-column label="综合绩效工资" align="center" prop="comprehensiveSalary" />
<el-table-column label="增量绩效工资" align="center" prop="incrementalSalary" />
<el-table-column label="单项奖1" align="center" prop="single1" />
<el-table-column label="单项奖2" align="center" prop="single2" />
<el-table-column label="单项奖3" align="center" prop="single3" />
<el-table-column label="单项奖4" align="center" prop="single4" />
<el-table-column label="单项奖5" align="center" prop="single5" />
<el-table-column label="加班费" align="center" prop="overtimePay" />
<el-table-column label="独生子女" align="center" prop="onlyChild" />
<el-table-column label="应付工资" align="center" prop="accruedWages" />
<el-table-column label="企业年金" align="center" prop="enterpriseAnnuity" />
<el-table-column label="公积金" align="center" prop="accumulationFund" />
<el-table-column label="养老保险" align="center" prop="oldInsurance" />
<el-table-column label="失业保险" align="center" prop="unemploymentInsurance" />
<el-table-column label="医疗保险" align="center" prop="medicalInsurance" />
<el-table-column label="会费" align="center" prop="membershipFee" />
<el-table-column label="个税" align="center" prop="personalTax" />
<el-table-column label="扣款合计" align="center" prop="totalDeduction" />
<el-table-column label="实付工资" align="center" prop="realPay" />
<el-table-column label="新职工房补" align="center" prop="housingAllowance" />
</el-table>
param表示的就是从后端获取动态渲染出的所有数据,data表示得是行,columns是列
最后返回的是一个数组,这个数组中的各项就会显示在合计行的各列中,index表示每一列的索引,从0开始
不自定义情况下第一列不进行数据求合操作,而是显示「合计」二字,可通过sum-text配置,自定义index=0
在methods()中添加方法:
// 求和
getSummaries(param) {
const {
columns, data } = param;
const sums = [];
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = '总计';
return;
}
if (index ===2) {
sums[index] = 'N/A';
return;
}
if (index ===3) {
sums[index] = 'N/A';
return;
}
const values = data.map(item => Number(item[column.property]));
if (!values.every(value => isNaN(value))) {
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr);
if (!isNaN(value)) {
return prev + curr;
} else {
return prev;
}
}, 0);
sums[index] += ' 元';
} else {
sums[index] = 'N/A';
}
});
return sums;
}
}
其中,下列代码表示我的数据的前三列不进行求和运算:
if (index === 0) {
sums[index] = '总计';
return;
}
if (index ===2) {
sums[index] = 'N/A';
return;
}
if (index ===3) {
sums[index] = 'N/A';
return;
}