【element-UI】el-table底部新增一栏不规则合计（小计）

el-table底部新增一栏不规则合计（小计）

项目需求：需要在指定列下方最后一行新增显示合计数目，只在指定的列下方显示单元格，即不规则合计

需求效果如下图：

解决过程

利用el-table中提供的table-slot

通过浏览器控制台查看每列元素，发现通过该标签上的width属性上有宽度信息

通过遍历该标签组即可获取每列宽度

 // 通过遍历该标签组获取每列宽度
  this.$refs.table.$refs.headerWrapper.querySelectorAll('col').forEach((item, index) => {
    console.log(item.clientWidth)
  })

<template>
  <div class="content">
  	<el-table
          ref="table"
          :data="tableList"
          :header-cell-style="{textAlign: 'center'}"
          style="width: 100%"
          v-loading="isLoading">
          <el-table-column label="用户信息">
            <el-table-column label="序号" type="index" width="50" align="center"></el-table-column>
            <el-table-column prop="phone" label="手机号码"></el-table-column>
            <el-table-column prop="name" label="用户昵称"></el-table-column>
            <el-table-column prop="address" label="服务地址"></el-table-column>
            <el-table-column prop="address" label="服务社区"></el-table-column>
          </el-table-column>
          <el-table-column label="服务信息">
            <el-table-column prop="title" label="服务标题"></el-table-column>
            <el-table-column prop="type" label="服务类型"></el-table-column>
            <el-table-column prop="num" label="数量" width="50"></el-table-column>
            <el-table-column prop="price" label="单价" width="50"></el-table-column>
            <el-table-column prop="amount1" label="服务总金额" width="100"></el-table-column>
            <el-table-column prop="amount2" label="实付金额"></el-table-column>
            <el-table-column prop="amount3" label="积分支付"></el-table-column>
            <el-table-column prop="data1" label="下单时间"></el-table-column>
            <el-table-column prop="data2" label="支付时间"></el-table-column>
          </el-table-column>
          <div slot="append">
          	<!-- class中出现了el-table字样的，为了复用el-table的样式 -->
            <table v-if="tableList.length != 0" cellspacing="0" cellpadding="0"  border="0" class="el-table__body" style="width: 1640px">
              <tr ref="sum" class="el-table__row sum">
                <td ref="sum_cell" class="el-table__cell">合计</td>
                <td ref="sum_total_amount" class="el-table__cell">{{getSum('amount1')}}</td>
                <td ref="sum_paid_amount" class="el-table__cell">{{getSum('amount2')}}</td>
                <td ref="sum_point_amount" class="el-table__cell">{{getSum('amount3')}}</td>
                <td ref="sum_free_cell" class="el-table__cell"></td>
              </tr>
            </table>
          </div>
        </el-table> 
  </div>
</template>

<script>
export default {
  name: 'index',
  data() {
    return {
      // tableList: [],
      tableList: [
        {
          "name": '一',
          "phone": '18888888888',
          "address": 'a',
          "info": 'b',
          "title": '11',
          "type": '1',
          "price": '1',
          "num": '1',
          "amount1": 12,
          "amount2": 22,
          "amount3": 132
        },
        {
          "name": '二',
          "phone": '12222222222',
          "address": 'aa',
          "info": 'bb',
          "title": '2',
          "type": '2',
          "price": '2',
          "num": '2',
          "amount1": 12,
          "amount2": 29,
          "amount3": 132
        },
        {
          "name": '三',
          "phone": '1777777777',
          "address": 'aaa',
          "info": 'bbb',
          "title": '33',
          "type": '3',
          "price": '3',
          "num": '3',
          "amount1": 12,
          "amount2": 72,
          "amount3": 132
        }
      ],
      timer: ''
    }
  },
  mounted() {
    // 初始化显示
    this.adjustWidth()
    let _this = this
    window.onresize = () => (() => {
      if(_this.timer) {
        return
      }
      _this.timer = setTimeout(() => {
        this.adjustWidth()
        _this.timer = null
      }, 100)
    })();
  },
  methods: {
	// 计算单列合计
    getSum(name) {
      var sum = 0;
      this.tableList.forEach((item,i) => {
        sum += parseFloat(item[name]);
      })
      return sum;
    },
    //计算单元格的宽度
    adjustWidth() {
      let sum_width = 0, // 显示合计整列的宽度
        sum_cell_width = 0, // 显示合计文字单元格的宽度
        sum_total_amount_width = 0, // 显示服务总金额单元格的宽度
        sum_paid_amount_width = 0, // 显示实付金额单元格的宽度
        sum_point_amount_width = 0, // 显示积分金额单元格的宽度
        sum_free_cell_width = 0 // 显示剩余空白单元格的宽度
      this.$nextTick(() => {
        if(this.$refs && this.$refs.sum && this.$refs.table ) {
          // 
          this.$refs.table.$refs.headerWrapper.querySelectorAll('col').forEach((item, index) => {
            sum_width += item.clientWidth
            if (index <= 8) {
              // index <= 8 时，累加显示合计文字单元格的宽度
              sum_cell_width += item.clientWidth
            } else if (index == 9) {
              // index == 9 时，累加显示服务总金额单元格的宽度
              sum_total_amount_width += item.clientWidth
            } else if (index == 10) {
              // index == 10 时，累加显示实付金额单元格的宽度
              sum_paid_amount_width += item.clientWidth
            } else if (index == 11) {
              // index == 11 时，累加显示积分金额单元格的宽度
              sum_point_amount_width += item.clientWidth
            } else {
              // 累加显示剩余空白单元格的宽度
              sum_free_cell_width += item.clientWidth
            }
          })
          // 通过ref为单元格设置style宽度样式
          this.$refs.sum.style += ';width:' + sum_width + 'px!important;';
          document.getElementsByClassName('el-table__append-wrapper')[0].style += ';width: '+ sum_width + 'px !important;';
          this.$refs.sum_cell.style += ';text-align: center;width:' + sum_cell_width + 'px;';
          this.$refs.sum_total_amount.style += ';padding-left: 10px;width:' + sum_total_amount_width + 'px;';
          this.$refs.sum_paid_amount.style = ';padding-left: 10px;width:' + sum_paid_amount_width + 'px;';
          this.$refs.sum_point_amount.style = ';padding-left: 10px;width:' + sum_point_amount_width + 'px;';
          this.$refs.sum_free_cell.style = ';width:' + sum_free_cell_width + 'px;';
        }
      })
    }    
  }
}
</script>

<style scoped lang="scss">
</style>