elementtable表单自定义表尾合计行定义内容 和amp; 自定义样式

着急用的可以直接看后面代码，对你有帮助的话给个免费的赞支持一下我吧

目录

尾标合计实现思路

尾表合计代码

实现的效果如下：

用的是Vue2 element 版本是2.15的

尾标合计实现思路

在element的 table尾表合计文档 中指出 将 show-summary设置为 true 可以显示尾表的总计行

 想要进行设置的话需要通过官网给的绑定方法属性 summary-method 传入写好的方法来进行定义。该方法需要返回一个数组，数组中的各项会对应的显示到合计行中，比如上图中的内容，返回的数组就如下: [ "总价", "N/A", "1883元", "15.83元", "63元" ]

如果要修改其样式，需要找到对应的样式并穿透才能进行修改

我找到的相应的样式如下：

/deep/.el-table__footer-wrapper tbody td.el-table__cell // 这个是设置表格每个框的样式的

/deep/.el-table__footer-wrapper tbody td.el-table__cell // 这是修改表格内容样式的

可以通过以上两个样式来实现自定义尾表的样式 

尾表合计代码

页面的代码，简单设置一个element的表，其他需求根据自己的来改

1.  
   <Table
2.  
   :data="data"
3.  
   border
4.  
   :summary-method="summaryMethod"
5.  
   show-summary
6.  
   >
7.  
   <TableColumn label="订单号" prop="name" />
8.  
   <TableColumn label="商品名称" prop="name" />
9.  
   <TableColumn label="成交金额" prop="name" />
10.  
    </Table>

 summaryMethod的计算方法

1.  
   summaryMethod(params) { // params是由 columns和data组成的对象，具体计算看个人需求
2.  
   let number = 372;
3.  
   // 合并尾表操作
4.  
    
5.  
   await this.$nextTick();
6.  
   const tables = document.querySelectorAll(
7.  
   ".el-table__footer-wrapper tr>td"
8.  
   ); // 通过控制显示隐藏实现表格的合并
9.  
   console.log(this.tabPaneLabel !== 2,'this.tabPaneLabel !== 2');
10.  
    tables[0].colSpan = tables.length-1 // 表示第一个格子的大小占总格子数-1
11.  
    tables[0].style.textAlign = "right"
12.  
    tables[1].colSpan = 1
13.  
    tables[1].style.textAlign = 'left'
14.  
    for (var index= 2; index<tables.length; index ) {
15.  
    tables[index].style.display = "none" //其余格子隐藏
16.  
    }
17.  
    // 一顿操作之后返回的数组
18.  
    return [`结算佣金:`,` 共 ${number} 元`,''] // 数组分别返回的是对应的三个格子的内容
19.  
    }

 注意：返回的数组的长度需要跟table表格的列数相等，内容需要隐藏的可以通过我方法中的display来控制，达到合并的效果

如果要修改颜色，比如把第二项中字体颜色改成红色，其他不变，可以通过如下方法进行修改

但是设计稿上需要的是字体黑数字红，实在是有点难为我这个CV工程师了

 于是我只能是通过分开成两个表格的方法来进行修改颜色，css样式的代码如下：

1.  
   <style>
2.  
   /* 合计样式 */
3.  
   /deep/.el-table__footer-wrapper tbody td.el-table__cell:nth-child(1){
4.  
   color: red !important;
5.  
   font-weight: 600;
6.  
   font-size: 16px;
7.  
   }
8.  
    
9.  
   /* 额外的需求*/
10.  
    /deep/.el-table__footer-wrapper tbody td.el-table__cell:nth-child(1){
11.  
    border-right: 0px; // 把第一个的格子右边框线去掉
12.  
    }
13.  
    </style>

效果如下，码字不易，如果对你有帮助的话，给个免费的赞吧=。欢迎讨论

这篇好文章是转载于：学新通技术网