Element-ui 实现el-table的合计 列 功能

3,997 阅读1分钟

需求案例:

代码:

页面:

<el-table        
    id="out-table"        
    :data="tableData1"        
    isdrag        
    highlight-current-row        
    style="width: 100%"        
    :border="true"        
    class="el_table_new"        
    
    show-summary        
    :summary-method="getTotal"      
>        
    <el-table-column prop="name" label="表名" width=""></el-table-column>        
    <el-table-column prop="success" label="上报成功" width=""></el-table-column>        
    <el-table-column prop="error" label="上报失败" width=""></el-table-column>           
    <el-table-column prop="total" label="合计" width=""></el-table-column>         
</el-table>

数据结构:

tableData1: [        
    {  
        name: "预算项目",            
        success: 12,            
        error: 1,        
    },        
    {   
        name: "采购项目",            
        success: 21,            
        error: 0,        
    },        
    {   
        name: "包件(标段)",            
        success: 13,            
        error: 0,        
    },        
    {            
        name: "采购(资格预审)公告",            
        success: 21,            
        error: 0,        
    },        
    {  
        name: "更正事项",            
        success: 50,            
        error: 0,        
    },        
    {  
        name: "中标(成交)结果公告",            
        success: 50,            
        error: 0,        
    },        
    {  
        name: "采购合同",            
        success: 50,            
        error: 0,        
    },      
], //表格数组

方法函数:

// 合计列    
getTotal(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 (column.property === 'success' || column.property === 'error') {                
        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] = '--';            
    }        
    });        
    return sums;    
},

实现效果:

合并行,可以考虑遍历数组 再每个对象中添加 合计得 字段 ,然后把所需求和字段相加 即可。