layui数据表格合计行

谁践踏了优雅 2024-03-25 16:43 82阅读 0赞

在日常的学习或开发中，关于后台管理这一块的都会使用到layui.table数据表格，只要用到layui.table数据表格一般就会用到数据表格合计行。

在layui官方文档数据表格的这一栏中，有“totalRow”这一属性，是否开启合计行区域，默认是不开启的。注意:这属性是layui2.4.0之后新增的，版本不够的无法使用该属性的。这是table表格的属性。

![51235608b439bf4a9110141c464a6ed4.png][]

接下来就是cols表头的属性，表头的参数同样也有“totalRow”这一属性，是否开启该列的合计功能，默认也是不开启的，默认值为false。另外还有一个“totalRowText”属性，是用于显示自定义的合计文本。

![d76d7d4a6c12267ad9e1ecaa461ba060.png][]

关键代码如下图所示：

![4264625cabc09356979368b7776cf0d6.png][]

1.首先需要在table中添加totalRow参数并将其设为true开启合计行区域;

2.之后在第一列中添加totalRowText参数是你需要显示的合计文本;

3.最后在需要合计数据的表头中添加totalRow参数为true开启该列的自动合计功能;

效果图如下：

![f7434895917949160e0a3d6f2d1c7993.png][]

[51235608b439bf4a9110141c464a6ed4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/d982c30670564b7c91b1805030376b1f.png
[d76d7d4a6c12267ad9e1ecaa461ba060.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/86c8f868ffab4555b11c8a7837436af3.png
[4264625cabc09356979368b7776cf0d6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/ad40f58b324c4ee0bf6794d706680b49.png
[f7434895917949160e0a3d6f2d1c7993.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/05e7d6d21d154646b58a8c25a2a90805.png

发表评论取消回复

表情：

评论列表（有 0 条评论，82人围观）

还没有评论，来说两句吧...

相关阅读

相关 layui数据表格合计行

在日常的学习或开发中，关于后台管理这一块的都会使用到layui.table数据表格，只要用到layui.table数据表格一般就会用到数据表格合计行。在layui官方文档数

谁践踏了优雅/ 2024年03月25日 16:43/ 0 赞/ 83 阅读

相关 layui数据表格点击编辑行数据事件

<table class="layui-hide" id="LAY_table_user" lay-filter="user"></table> 注意：单元格编辑事件

清疚/ 2023年06月06日 10:47/ 0 赞/ 33 阅读

相关 layui数据表格自动换行解决办法

问题背景不是所有的列表都是一行就搞定，如果遇到`layui.table`需要支持`自动换行`的情况，这个时候就需要改造layui的数据表格，支持自动换行。想要实现的

墨蓝/ 2023年03月04日 09:06/ 0 赞/ 1 阅读

相关 layui 数据表格table合计配置跟合计行去掉小数点问题

layui 数据表格table合计配置跟合计行去掉小数点问题表格设置 1.在表格的基本参数里设置 totalRow ![在这里插入图片描述][20210111

拼搏现实的明天。/ 2023年01月05日 01:18/ 0 赞/ 737 阅读

相关动态创建elementUI表格合计行

elementui加上合计行非常简单，在表格组件上，将show-summary设置为true就会在表格尾部展示合计行。定义自己的合计逻辑，使用summary-method并传入

淡淡的烟草味﹌/ 2022年12月25日 09:59/ 0 赞/ 356 阅读

相关 ant-design Table表格添加合计行

文章目录 1：方式一：（比较好维护：推荐） 1：效果图 2：排序数字 3：table 4：data定义

小灰灰/ 2022年11月06日 14:50/ 0 赞/ 1511 阅读

相关 Layui数据表格换行

1.添加<br> 2.添加样式 .layui-table-cell { height: auto; } 效果如下： ![70][] [70

小咪咪/ 2022年05月20日 09:07/ 0 赞/ 497 阅读

相关 table表格-表尾合计行

若表格展示的是各类数字，可以在表尾显示各列的合计。 1、show-summary设置为true就会在表格尾部展示合计行。默认情况下，对于合计行，第一列不进行数据求合操作，而

╰+哭是因爲堅強的太久メ/ 2022年03月18日 13:22/ 0 赞/ 886 阅读

相关 layui 合计行数据超过2位小数

1.文件位置layui/lay/model/table.js 2.修改源代码： var e = t.totalRowText || ""; //ctrl+f找到这一

客官°小女子只卖身不卖艺/ 2022年01月31日 03:19/ 0 赞/ 274 阅读

相关 layui数据表格

快速使用创建一个table实例最简单的方式是，在页面放置一个元素 `<table id="demo"></table>`，然后通过 table.render() 方法指

约定不等于承诺〃/ 2021年06月24日 16:11/ 0 赞/ 824 阅读