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

导读:本篇文章讲解 elementUI table 添加合计行,合计行放置顶部(标题下内容上),合计行渲染所有数据的和(取后端接口数据),合并合计单元格。,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

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;
    },

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/66295.html

(1)
小半的头像小半

相关推荐

极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!