关于 el-table 的合计行问题

目录

一.自定义合计行

二.合计行不展示,只有缩放/变大窗口或者F12弹出后台时才展示

三.合计行出现了表格滚动条下方

四.合计行整体样式的修改

五.合计行单元格样式修改

1.css

2.jsx方式

六.合计行单元格合并


一.自定义合计行

通过 show-summary 属性开启合计行功能,通过 :summary-method 属性自定义合计行方法。

html 复制代码
        <el-table :summary-method="getSummaries" show-summary ref="table">
        </el-table>
javascript 复制代码
    getSummaries(param) {
      // columns 是一个数组,每一项就是每一列表头的内容
      // data 是表格数据,每一项就是每一行 row 的数据
      const { columns, data } = param;
      // sums 是合计行的数据,是一个普通数组,数组每一项内容就是合计行按照顺序展示的内容
      const sums = [];
      columns.forEach((column, index) => {
        // 这里是设置合计行第一列内容位 总计,也可以根据 index 判断,  if (index === 0)
        if (column.property === "trade_id") {
          sums[index] = "合计";
        } else if (
          // 这里是自己需要合计的表头,也可以根据 index 判断,但是为了防止以后顺序打乱,就用 prop 去判断
          column.property === "trade_power" ||
          column.property === "trade_fee"
        ) {
          // values 是该表头下所有数据组成的数组
          const values = data.map((item) => Number(item[column.property]));
          // 这是把数组的所有值都相加再一起,Utils方法是自己定义引入的避免精度缺失的方法,博客别的内容有写
          sums[index] = values.reduce((prev, cur) => {
            return Utils.argAdd(Number(prev), Number(cur));
          }, 0);
        } else {
          // 这里不需要合计的表头 设置展示内容为 ---
          sums[index] = "---";
        }
      });
      return sums;
    },

二.合计行不展示,只有缩放/变大窗口或者F12弹出后台时才展示

不展示的原因:是因为表格刚开始是没有数据的,所以不展示合计行,等获取到数据的时候,表格不会重新渲染dom,所以该合计行还是不展示,缩放窗口或者弹出后台时会导致页面重新渲染,此时合计行才会渲染出来。

解决方法:在获取数据以后调用 el-table 的 doLayout() 方法去重新渲染表格 dom。

javascript 复制代码
      queryTableDataApi(params).then((res) => {
        this.allTableData = res;
        this.$nextTick(() => {
          this.$refs["table"].doLayout();
        });
      });

或者

javascript 复制代码
  updated() {
    this.$nextTick(() => {
      this.$refs["table"].doLayout();
    });
  },

三.合计行出现了表格滚动条下方

原本合计行在表格下部,我们可以将合计行放在表格上部,也就是第一行。

css 复制代码
::v-deep .el-table {
  display: flex;
  flex-direction: column;
}
/* order默认值为0,只需将表格主体order设为1即可移到最后,合计就上移到最上方了 */
::v-deep .el-table__body-wrapper {
  order: 1;
}
// 下面的代码是设置 fixed 后,要根据实际情况所作的修改
::v-deep.el-table__fixed-body-wrapper {
  top: 96px !important;
}
::v-deep .el-table__fixed-footer-wrapper {
  z-index: 0;
}

四.合计行整体样式的修改

css 复制代码
::v-deep .el-table .el-table__footer-wrapper tbody td {
  background: black;
  color: white;
  font-weight: bolder;
}

五.合计行单元格样式修改

1.css

比较死板,因为要根据 nth-child(n) 去固定在某一列进行生效,如果顺序改变就会出现错误。

css 复制代码
::v-deep .el-table .el-table__footer-wrapper tbody td:nth-child(3) {
  color: lightgreen;
  font-weight: bolder;
}

::v-deep .el-table .el-table__footer-wrapper tbody td:nth-child(4) {
  color: red;
  font-weight: bolder;
}

2.jsx方式

合计行自定义方法中返回 jsx。

javascript 复制代码
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (column.property === "trade_id") {
          sums[index] = "合计";
        } else if (
          column.property === "trade_power" ||
          column.property === "trade_fee"
        ) {
          const values = data.map((item) => Number(item[column.property]));
          let value = values.reduce((prev, cur) => {
            return Utils.argAdd(Number(prev), Number(cur));
          }, 0);
          // 在这里设置类名
          sums[index] = <span class={"green"}>{value}</span>;
        } else {
          sums[index] = "---";
        }
      });
      return sums;
    },
css 复制代码
.green {
    color: lightgreen;
    font-weight: bolder;
}

六.合计行单元格合并

javascript 复制代码
  watch: {
    showTableData: {
      immediate: true,
      handler() {
        setTimeout(() => {
          const tds = document.querySelectorAll(
            ".el-table__footer-wrapper tr>td"
          );
          tds[0].colSpan = 2;
          tds[0].style.textAlign = "center";
          tds[1].style.display = "none";
        }, 0);
      },
    },
  },
相关推荐
前端小巷子5 分钟前
web域名解析
前端·javascript·面试
LaoZhangAI5 分钟前
沉浸式翻译API深度解析:500万用户的翻译神器如何配置[2025完整指南]
前端·后端
然我12 分钟前
链表指针玩不转?从基础到双指针,JS 实战带你破局
前端·数据结构·算法
江城开朗的豌豆12 分钟前
组件封装实战:如何设计灵活又好用的前端组件?
前端·javascript·vue.js
EndingCoder20 分钟前
算法与前端的可访问性
前端·算法·递归·树形结构
brzhang28 分钟前
别再梭哈 Curosr 了!这 AI 神器直接把需求、架构、任务一条龙全干了!
前端·后端·架构
Kagol36 分钟前
TinyEditor v4.0 alpha 版本发布,更强大的表格、更丰富的表情、体验更好的图片/视频/文件上传功能
前端·开源
The_era_achievs_hero41 分钟前
微信131~140
开发语言·javascript·微信
然我1 小时前
路由还能这么玩?从懒加载到路由守卫,手把手带你解锁 React Router 进阶技巧
前端·react.js·面试
良木林2 小时前
JavaScript书写基础和基本数据类型
开发语言·前端·javascript