场景

el-table中的每列显示的是数字，需要在表格的最下面一行添加汇总行，计算每列的总和。

el-table自带是否显示汇总行这个属性。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

属性声明如下

找到要添加汇总行小计行的el-table

<el-table v-loading="loading" :data="kqtjList"  show-summary="true">

设置shoe-summary为true

但是如果列比较多有滚动条出现的话就会出现上面那种合计行在滚动条

解决办法

打开此vue页面添加一些样式

<style>.el-table {overflow-x: auto;
}
.el-table__header-wrapper,
.el-table__body-wrapper,
.el-table__footer-wrapper {overflow: visible;
}
.el-table::after {position: relative;
}
.el-table--scrollable-x .el-table__body-wrapper {overflow: visible;
}
</style>

添加位置

添加之后的效果

ElementUI中el-table在表格最下方添加一列汇总小计行相关推荐

Element-UI中关于table表格的那些骚操作
最近的项目中使用到element-ui组件库,由于做的是后台管理系统,所以经常需要操作表格,编辑样式的过程中遇到一些问题,官网针对table给出了很多的api,自己可以自定义,基本能满足产品需求,但是 ...
ElementUI中为table增加小计/合计
ElementUI中只有为表格增加一个合计的功能,但是有些时候可能会遇到同时增加小计/合计的功能,可以利用slot='append'去实现多个合计功能. 文章地址: ElementUI中为table增 ...
element-ui 中的table的列隐藏问题
element-ui 中的table和bootstrap中的table的某些设置还是有一定的差别的.之前用bootstrap做的表格,想要实现简短列和详细列的切换.因为详细列实在有太多列了,拉动滚动条 ...
Python中对table（表格）的应用
Python中对table(表格)的应用代码: from prettytable import PrettyTablefield_names = ("ID",'名字','英语成绩 ...
使用NG-ZORRO（Angular 组件库）中Table组件，通过columnTable属性固定列，结果每行数据内容穿透了两遍的固定列；鼠标滑过该条数据时，两侧固定列的背景色不跟着改变～
[问题] 使用NG-ZORRO(Angular 组件库)中Table组件,通过#columnTable属性固定列,结果每行数据内容穿透了两遍的固定列(因为是刚开始做这个项目,所以盲猜是之前某位同仁搞个 ...
element表格攻略大全,表头合并,表格合并,动态添加一列
elementui表格攻略大全,表头合并,表格合并,动态添加一列 element合并表头与合并表格,需求就是这样,数据结构中需要有一个大类集合,由于数据结构是我定的,图二是这个表格的数据结构 [{fu ...
elementui中打开html页面,ElementUi中el
现实的场景中很经常遇到表格el-table数据过多,为了更好的用户体验,所以我们需要用到分页,一般分页可以视数据量的大小可分为前端控制和后端控制. 先看下效果(已做脱敏处理) 图1 前端el-tabl ...
小计合计总计表格_总计总计重复的Excel小计
小计合计总计表格 Do you use Excel's Subtotal command to automatically create subtotals in a list? I prefer p ...
jqgrid如何渲染表格数据_jqgrid,jquery_jqGrid pivot 增加分项小计，jqgrid,jquery,jquery插件,javascript,表格 - phpStudy...
jqGrid pivot 增加分项小计 1.表格用的插件是jqGrid pivot. 想在每一个单数下面的分项后面加一个小计.看了插件demo 没找到每个分项都可以有小计的. 总的横向和纵向总计都是 ...

ElementUI中el-table在表格最下方添加一列汇总小计行

场景

实现

ElementUI中el-table在表格最下方添加一列汇总小计行相关推荐

最新文章

热门文章