el-table表格分页时,最后一页添加合计行并自定义值

1.table合并行需求.

最近项目里提了个需求,之前没有接触过,搜索后写出个demo供自己记录一下.

最终效果:

1. 表格可以翻页,但只在最后一页时展示合计行.

2. 合计行的前i个单元格合并,并且赋值,最后n个单元格展示后台返回的值.

3. 合计行样式颜色修改.

 效果如上图.

因为是自己测试demo,没有后台配合,就自行填充了数据,后续改为接口调用就行.

2. html代码

具体的方法名跟属性可以在element-ui里找到,就不赘述了直接贴代码了哈.

<template>
    <div>
        <el-button @click="changes">
            展示
        </el-button>
      <el-table
        ref="tableRef"
        :data="tableData"
        :summary-method="getSummaries"
        :show-summary="dataFlag"
        :span-method="arraySpanMethod"
        border
        style="width: 100%">
        <el-table-column
          prop="id"
          label="ID"
          width="180">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名">
        </el-table-column>
        <!-- 具体的table内容就根据自己的情况来写,就不全放上去了哈 -->
      </el-table>
    </div>
  </template>

3. 数据

        数据部分是我自行补充的,后续项目里可根据实际情况变更

      data() {
        return {
            dataFlag:true,
            dats:15,
            datas:20,
            customNum: 20202,
            customNums: 2020222,
            tableData: [],
        };
      },

4.方法

主要的方法,代码如下:

methods: {
        changes() {
            this.dataFlag = !this.dataFlag;
            this.$nextTick(() => {
            if (this.$refs.tableRef.$el) {
              let current = this.$refs.tableRef.$el
                .querySelector(".el-table__footer-wrapper")
                .querySelector(".el-table__footer");
              let cell = current.rows[0].cells;
              for(let i = 1;i<8;i++) {
                cell[i].style.display = "none";
              }
              cell[0].colSpan = "8"; // 合并单元格
              cell[0].style.color = "red"; // 修改合计行某一个单元格的样式。
            }
          });
        },        
        arraySpanMethod({ row, column, rowIndex, columnIndex }) {
          this.$nextTick(() => {
            if (this.$refs.tableRef.$el) {
              let current = this.$refs.tableRef.$el
                .querySelector(".el-table__footer-wrapper")
                .querySelector(".el-table__footer");
              let cell = current.rows[0].cells;
              for(let i = 1;i<8;i++) {
                cell[i].style.display = "none";
              }
              cell[0].colSpan = "8"; // 合并单元格
              cell[0].style.color = "red"; // 修改合计行某一个单元格的样式。
            }
          });
        },
        getSummaries(param) {
          const { columns, data } = param;
          const sums = [];
          columns.forEach((column, index) => {
            if (index === 0) {
              sums[index] = `合计(税前折价为`+this.dats+`,税后折价计为`+this.datas+`)`;;
              return;
            }
            if (index === 1) {
              // this.customNum 自定义值一般为后台返回合计值
              sums[8] = this.customNum;
              sums[9] = this.customNums;
              return;
            }
          });
          return sums;
        },
      },

5.总结

以上就是一个简单的demo全部内容了,主要还是方法需要仔细了解一下,不然就像我自己搞了半天还是头大的很,所以记录下来以备后续回顾.