直接上代码:
<el-table :data="lists" style="width: 100%" max-height="500" :header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }" show-summary :summary-method="getSummaries" class="center-table" > <el-table-column fixed="left" prop="id" label="序号" /> <el-table-column fixed="left" prop="name" label="姓名" width="90" /> <el-table-column label="工资所属日期" width="120"> <span>{{ dates }}</span> </el-table-column> <el-table-column label="公共性质" width="100"> <template #default="scope"> <span>{{ scope.row.layout == 1 ? '长期派遣' : scope.row.layout == 2 ? '短期派遣' : '学员' }}</span> </template> </el-table-column> <el-table-column prop="zw" label="职务" width="100" /> <el-table-column prop="title" label="薪水等级" width="100" /> <el-table-column label="薪资待遇标准" width="300"> <el-table-column prop="money" label="岗位工资" width="100" /> <el-table-column prop="safe" label="安全质量奖金" width="100" /> <el-table-column prop="station" label="岗位津贴" width="100" /> <el-table-column prop="performance" label="绩效奖金" width="100" /> </el-table-column> <el-table-column prop="total_day" label="应出勤天数" width="120" /> <el-table-column prop="standard" label="实际出勤天数" width="120" /> <el-table-column prop="money" label="岗位工资" width="100" /> <el-table-column prop="safe" label="安全质量奖金" width="120" /> <el-table-column prop="station" label="岗位津贴" width="100" /> <el-table-column prop="performance" label="绩效奖金" width="100" /> <el-table-column label="证书补贴" width="100"> <template #default="scope"> <input type="number" v-model="scope.row.crt_allowance" /> </template> </el-table-column> <el-table-column label="通讯补贴" width="100"> <template #default="scope"> <input type="number" v-model="scope.row.tel_allowance" /> </template> </el-table-column> <el-table-column label="电脑补贴" width="100"> <template #default="scope"> <input type="number" v-model="scope.row.comp_allowance" /> </template> </el-table-column> <el-table-column label="夜班补贴" width="100"> <template #default="scope"> <input type="number" v-model="scope.row.night_allowance" /> </template> </el-table-column> <el-table-column label="加班补贴" width="100"> <template #default="scope"> <input type="number" v-model="scope.row.overtime_allowance" /> </template> </el-table-column> <el-table-column label="误餐补贴" width="100"> <template #default="scope"> <input type="number" v-model="scope.row.delay_allowance" /> </template> </el-table-column> <el-table-column label="租房补贴" width="100"> <template #default="scope"> <input type="number" v-model="scope.row.house_allowance" /> </template> </el-table-column> <el-table-column label="高温补贴" width="100"> <template #default="scope"> <input type="number" v-model="scope.row.hot_allowance" /> </template> </el-table-column> <el-table-column label="取暖补贴" width="100"> <template #default="scope"> <input type="number" v-model="scope.row.toast_allowance" /> </template> </el-table-column> <el-table-column label="外出施工补贴" width="120"> <template #default="scope"> <input type="number" v-model="scope.row.egress_allowance" /> </template> </el-table-column> <el-table-column label="奖金" width="100"> <template #default="scope"> <input type="number" v-model="scope.row.bonus" /> </template> </el-table-column> <el-table-column label="其他补助" width="100"> <template #default="scope"> <input type="number" v-model="scope.row.other_allowance" /> </template> </el-table-column> <el-table-column label="扣款" width="100"> <template #default="scope"> <input type="number" v-model="scope.row.deduct" /> </template> </el-table-column> <el-table-column prop="yf_subtotal" label="应发小计" width="100"></el-table-column> <el-table-column label="个人社保" width="100"> <template #default="scope"> <input type="number" v-model="scope.row.gr_security" /> </template> </el-table-column> <el-table-column label="个税" width="100"> <template #default="scope"> <input type="number" v-model="scope.row.individual" /> </template> </el-table-column> <el-table-column prop="sf_subtotal" label="实发小计" width="100"></el-table-column> <el-table-column label="单位社保" width="100"> <template #default="scope"> <input type="number" v-model="scope.row.dw_security" /> </template> </el-table-column> <el-table-column label="管理费" width="100"> <template #default="scope"> <input type="number" v-model="scope.row.management" /> </template> </el-table-column> <el-table-column prop="tel" label="电话" width="140"></el-table-column> <el-table-column prop="idcard" label="身份证号" width="180"></el-table-column> <el-table-column prop="bank_card" label="银行卡号" width="220"></el-table-column> <el-table-column fixed="right" prop="totalprice" label="合计金额" width="100" ></el-table-column> </el-table>
里面用到两个属性:
:summary-method="getSummaries"
第二步:逻辑部分
const getSummaries = (param) => { const { columns, data } = param; const sums = []; columns.forEach((column, index) => { if (index === 0) { sums[index] = '总价'; return; } const values = data.map((item) => Number(item[column.property])); if ((index >= 6 && index < 10) || (index >= 12 && index <= 34) || index == 38) { sums[index] = values.reduce((prev, curr) => { const value = Number(curr); if (!isNaN(value)) { return prev + curr; } else { return prev; } }, 0); sums[index] = sums[index].toFixed(2); // sums[index] += ' 元'; } else { sums[index] = ''; } }); return sums; };