elementUI table 添加合计行，合计行放置顶部(标题下内容上)，合计行渲染所有数据的和(取后端接口数据)，合并合计单元格。

1.将设置为就会在表格尾部展示合计行。2.借用样式将合计行置顶3.使用vue.$el.querySelector()方法,table渲染时，调用封装好的合并方法。4.渲染合计，sumObj是通过后端接口得到的对应字段的合计（对象数据）。在并在此处调用合并“合计”文字的单元格...

zx&it

4390人浏览 · 2022-07-07 09:56:24

zx&it · 2022-07-07 09:56:24 发布

1.将show-summary设置为true就会在表格尾部展示合计行。

    <el-table
        :data="tableData"
        id="tableData"
        show-summary
        :summary-method="getSummaries"
      >

2.借用样式将合计行置顶

.el-table {
  display: flex;
  flex-direction: column;
}
.el-table .el-table__body-wrapper {
    order: 1;
  }

3.使用vue.$el.querySelector()方法,table渲染时，调用封装好的合并方法。

 setColSpan() {
      var that = this;
      setTimeout(function () {
        if (that.$el.querySelector("#tableData")) {
          var current = that.$el
            .querySelector("#tableData")
            .querySelector(".el-table__footer-wrapper")
            .querySelector(".el-table__footer");
          var cell = current.rows[0].cells;
          cell[0].style.display = "none";   //隐藏一列用于多列合并
          cell[1].colSpan = "2";  //合并两列
        }
      }, 10);
    },

4.渲染合计，sumObj是通过后端接口得到的对应字段的合计（对象数据）。在并在此处调用合并“合计”文字的单元格

    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计';
          return;
        }
        sums[index] = isNaN(this.sumObj[column.property]) ? '' :this.sumObj[column.property]
      });

       this.setColSpan();
      return sums;
    },