【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