el-table合计行合并自定义列数,单独合计某一列

效果图:

合计行,合并前两个单元格展示合计字样,第15列展示整列合计,第16列展示此列最后一条的数据在这里插入图片描述

HTML代码:

<el-table class="mar-top10" id="table" :summary-method="getSummaries" :span-method="arraySpanMethod" show-summary :data="item1.invoiceResponList" ref="table" size='mini' border style="width: 100%" highlight-current-row>
<!-- <el-table class="mar-top10" id="table" ref="table" size='mini' border style="width: 100%" highlight-current-row> -->
   <el-table-column type='index' label="赔付顺序" min-width="45" align="center"></el-table-column>
   <el-table-column prop="riskName" label="险种名称" min-width='90' align="center"></el-table-column>
   <el-table-column prop="dutyName" label="责任名称" min-width='80' align="center"></el-table-column>
   <el-table-column prop="polno" label="保单险种号" min-width='80' align="center"></el-table-column>
   <el-table-column prop="amnt" label="保额" min-width='80' align="center"></el-table-column>
   <el-table-column prop="beforeAmnt" label="理赔前险种剩余保额" min-width='80' align="center"></el-table-column>
   <el-table-column prop="outdutytype" label="免赔类型" min-width='80' align="center"></el-table-column>
   <el-table-column prop="outdutyamnt" label="免赔额" min-width='80' align="center"></el-table-column>
   <el-table-column prop="beforeOutdutyamnt" label="理赔前剩余免赔额" min-width='80' align="center"></el-table-column>
   <el-table-column prop="useoutdutyamnt" label="实际免赔额(分配后)" min-width='80' align="center"></el-table-column>
   <el-table-column prop="outdutyrate" label="赔付比例" min-width='80' align="center"></el-table-column>
   <el-table-column prop="invoiceamnt" label="发票有效金额" min-width='80' align="center"></el-table-column>
   <el-table-column prop="diffInvoiceamnt" label="发票有效金额(机构差异化)" min-width='100' align="center"></el-table-column>
   <el-table-column prop="standpay" label="理算金额" min-width='80' align="center"></el-table-column>
   <el-table-column prop="realpay" label="赔付金额" min-width='80' align="center"></el-table-column>
   <el-table-column prop="addmoney" label="发票累计赔付金额" min-width='80' align="center"></el-table-column>
   <el-table-column prop="lastOutdutyamnt" label="理赔后剩余免赔额" min-width='80' align="center"></el-table-column>
   <el-table-column prop="lastAmnt" label="理赔后剩余保额" min-width='80' align="center"></el-table-column>
   <el-table-column prop="minMath" label="赔付公式=(min{(有效金额-实际免赔额)*赔付比例,理赔前险种剩余保额})" width='240' align="center">
       <template slot-scope="scope">
           <span>min{({{scope.row.invoiceamnt}}-{{scope.row.useoutdutyamnt}})*{{scope.row.outdutyrate}}%,{{scope.row.beforeAmnt}}}</span>
       </template>
   </el-table-column>
</el-table>

js代码:

arraySpanMethod({ row, column, rowIndex, columnIndex }) {
    this.data1.map((item,index)=> {
        // console.log(index);
        const tds = document.getElementsByClassName('el-table__footer')[index].getElementsByTagName('td')
        tds[0].colSpan = 2;
        tds[0].style.textAlign = "center";
        tds[1].style.display = "none";
        // console.log(tds);
    })
}
getSummaries(param) {
     console.log(param);
     const { columns, data } = param;
     const sums = [];
     columns.forEach((column, index) => {
         if (index === 0) {
             sums[index] = '合计赔付金额';
             return;
         } else if (index===14) {
             const values = data.map(item => Number(item[column.property]));
             console.log(values);
             if (!values.every(value => isNaN(value))) {
                 sums[index] = values.reduce((prev, curr) => {
                 const value = Number(curr);
                 var sum = 0;
                 if (!isNaN(value)) {
                     sum = Number(Number(prev)+Number(curr)).toFixed(2);
                     return sum;
                 } else {
                     return prev;
                 }
                 }, 0);
                 sums[index] += ' ';
             } 
         } else if (index === 15) {
             const values = data.map(item => Number(item[column.property]));
             sums[index] = values[values.length-1];
         }
     });
     return sums;
 },
使用 element-ui 的 el-table 组件合计一列可以通过以下步骤实现: 1. 给表格数据源添加一个合计字段,用来存储该列的总和。 2. 在 el-table-column 组件中使用 scoped-slot 自定义列的内容,将该列的每个单元格的值累加到合计字段中。 3. 在表格底部添加一个 el-table-footer 组件,显示合计字段的值。 下面是一个简单的示例代码: ```html <template> <el-table :data="tableData"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"> <template slot-scope="scope">{{ scope.row.age }}</template> </el-table-column> <el-table-column prop="score" label="分数"> <template slot-scope="scope"> {{ scope.row.score }} <!-- 将该列的每个单元格的值累加到合计字段中 --> <span hidden>{{ total += scope.row.score }}</span> </template> </el-table-column> <el-table-footer> <template slot="footer"> <!-- 显示合计字段的值 --> <el-table-column :label="'合计:' + total"></el-table-column> </template> </el-table-footer> </el-table> </template> <script> export default { data() { return { tableData: [ { name: '张三', age: 20, score: 80 }, { name: '李四', age: 22, score: 90 }, { name: '王五', age: 21, score: 85 } ], total: 0 // 合计字段 }; } }; </script> ``` 在上面的示例代码中,我们使用了一个隐藏的 span 元素来实现将该列的每个单元格的值累加到合计字段中。同时,我们使用了 el-table-footer 组件来显示合计字段的值。 需要注意的是,如果表格中有分页的话,以上方法只能计算当前页的合计值。如果需要计算所有数据的合计值,需要在后台进统计。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值