element组件之table表尾指定列求和总计

最新推荐文章于 2025-12-01 06:30:00 发布

原创最新推荐文章于 2025-12-01 06:30:00 发布 · 4.7k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue #table

element 同时被 2 个专栏收录

2 篇文章

订阅专栏

table

1 篇文章

订阅专栏

这篇博客介绍了如何在Element UI的表格组件中实现指定列的求和总计功能。通常，表尾合计行会自动对所有数值列进行求和，但实际需求可能只需要特定列的总计。通过在methods中添加条件判断，并结合CSS隐藏不需要显示的合计，可以实现这一目标。

对element组件的表格进行指定列总计计算：
在这里插入图片描述

element官网中的表尾合计是只要是有数字的列都会进行合计，而有时开发项目中只需要显示某一列（某几列）的合计结果。

将show-summary设置为true就会在表尾展示合计行。默认情况下，对于合计行，第一列不进行数据求和操作，而是显示合计二字，其余列会将本列所有的数值进行求和操作并显示。

列求和： show-summary :summary-method=" getSummaries"
在这里插入图片描述
在methods里写：

在这里插入图片描述
这样出来的结果是只要有数字的列都会进行求和

那如果只需要第四列显示总计呢？？于是加个了判断条件if（index === 3）：

结果出来还是和之前的一样，并没有只显示第四列。
那么，可以在css上做一些工作，将不想要显示的列的合计进行样式隐藏 display:none 就可以了。
在控制台上找到对应的元素，加上以下代码：

.el-table__footer .el-table_1_column_2 .cell,.el-table__footer .el-table_1_column_3 .cell,.el-table__footer .el-table_1_column_5 .cell,.el-table__footer .el-table_1_column_6 .cell,.el-table__footer .el-table_1_column_7 .cell{
    display: none !important;
}