elementUI中关于 el-table 表尾合计行列子
列表中数量和金额需要统计并显示单位:
统计后的效果如下:
<el-table v-loading="loading" border :data="List" @selection-change="handleSelectionChange" show-summary :summary-method="getSummaries" > <el-table-column label="领用单号" align="center" prop="hhac07001" /> <el-table-column label="日期" align="center" prop="createTime" /> <el-table-column label="库房" align="center" prop="hhac01001" /> <el-table-column label="物品分类" align="center" prop="hhac02001" /> <el-table-column label="物品名称" align="center" prop="hhac03001" /> <el-table-column label="部门编号" align="center" prop="deptCode" /> <el-table-column label="部门名称" align="center" prop="hscz00018Name" /> <el-table-column label="数量" align="center" prop="hhac08003" /> <el-table-column label="金额" align="center" prop="hhac08001" /> </el-table>
方法显示:
methods: { getSummaries(param) { const { columns, data } = param; // 自定义需要合计的列表与显示单位 const showItem = new Map([ ['hhac08003', ''], ['hhac08001', '元'], ]); const sums = []; //轮询table列 columns.forEach((column, index) => { // 第一列显示合计二字 if (index === 0) { sums[index] = '合计'; return; } // 在自定义Map数组中查询是否包含当前列名 符合条件计算合计最下面列显示的数据 if(showItem.has(column.property)){ // 在行中过滤该列具体数据 const values = data.map(item => Number(item[column.property])); sums[index] = values.reduce((prev, curr) => { const value = Number(curr); if (!isNaN(value)) { return prev + curr; } else { return prev; } }, 0) // 加上单位 sums[index]+=showItem.get(column.property) }else{ // 不符合自定义列的条件列显示 sums[index] = '----'; } }); return sums; },