大家看合计的这个位置占了两个格子

正常在table中加入了 show-summary这个属性

 他是这个样子的，只占一个格子，但是由于项目需求，必须占两个格子

<template>
  <div style="min-width: 1400px">
    <!-- 题头 -->

    <div
      style="
        height: 65px;
        background-color: rgb(227, 227, 227);

        line-height: 65px;
      "
    >
      <h1>2021年6月质量考核与奖励信息查看</h1>
    </div>

    <!-- 表格 -->
    <el-table
      :data="tableData"
      show-summary
      style="width: 100%"
      :align="align"
      ref="table"
      id="table"
    >
      <!-- 序号 -->

      <el-table-column type="index" label="序号" width="100px" :align="align">
      </el-table-column>
      <el-table-column label="单位" prop="unit" min-width="13%" :align="align">
      </el-table-column>

      <el-table-column label="考核" min-width="41%" :align="align">
        <el-table-column
          prop="zero_defect"
          label="零缺陷交车"
          min-width="10%"
          :align="align"
        >
        </el-table-column>
        <el-table-column
          prop="economic_accountability"
          label="经济责任制"
          min-width="10%"
          :align="align"
        >
        </el-table-column>
        <el-table-column
          prop="internal_oversight"
          label="内部监督抽查"
          min-width="10%"
          :align="align"
        >
        </el-table-column>
        <el-table-column
          prop="quality_specialty"
          label="质量专项"
          width="250px"
          :align="align"
        >
        </el-table-column>
        <el-table-column prop="other" label="其他" width="100px" :align="align">
        </el-table-column>
      </el-table-column>
      <el-table-column label="奖励" min-width="12%" :align="align">
        <el-table-column
          prop="quality_specialty_two"
          label="质量专项"
          min-width="12%"
          :align="align"
        ></el-table-column>
      </el-table-column>
      <el-table-column
        label="考核小计"
        prop="audit_sub"
        min-width="7%"
        :align="align"
      >
      </el-table-column
      ><el-table-column
        label="奖励小计"
        prop="reward_sub"
        min-width="10%"
        :align="align"
      >
      </el-table-column>
    </el-table>
    <div style="position: relative">
      <div style="position: absolute; bottom: -70px; right: 30px">
        <el-button>取消</el-button>

        <el-button style="background-color: #001cd9; color: white"
          >确认</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: [],
      align: "center",
      // 查询的表单
      formInline: {
        year: "",
        month: "",
        unit: "",
      },
      //table的假数据
      tableData: [
        {
          unit: "货车分厂", //单位
          zero_defect: "2000", //零缺陷交车
          economic_accountability: "1000", //经济责任制
          internal_oversight: "500", //内部监督抽查
          quality_specialty: "200", //质量专项
          other: "", //其他
          quality_specialty_two: "已上报", //质量专项
          audit_sub: "3700", //审核小计
          reward_sub: "500", //奖励小计
        },
        {
          unit: "货车分厂", //单位
          zero_defect: "2000", //零缺陷交车
          economic_accountability: "1000", //经济责任制
          internal_oversight: "500", //内部监督抽查
          quality_specialty: "200", //质量专项
          other: "", //其他
          quality_specialty_two: "已上报", //质量专项
          audit_sub: "3700", //审核小计
          reward_sub: "500", //奖励小计
        },
        {
          unit: "货车分厂", //单位
          zero_defect: "2000", //零缺陷交车
          economic_accountability: "1000", //经济责任制
          internal_oversight: "500", //内部监督抽查
          quality_specialty: "200", //质量专项
          other: "", //其他
          quality_specialty_two: "已上报", //质量专项
          audit_sub: "3700", //审核小计
          reward_sub: "500", //奖励小计
        },
        {
          unit: "货车分厂", //单位
          zero_defect: "2000", //零缺陷交车
          economic_accountability: "1000", //经济责任制
          internal_oversight: "500", //内部监督抽查
          quality_specialty: "200", //质量专项
          other: "", //其他
          quality_specialty_two: "已上报", //质量专项
          audit_sub: "3700", //审核小计
          reward_sub: "500", //奖励小计
        },
      ],
    };
  },

  watch: {
//监听table这个对象
    tableData: {
      // 立即监听
      immediate: true,
      handler() {
        this.$nextTick(() => {
          const tds = document.querySelectorAll(
            "#table .el-table__footer-wrapper tr>td"
          );
          // colSpan合并列
          tds[0].colSpan = 2;
          tds[0].style.textAlign = "center";
          tds[1].style.display = "none";
        });
      },
    },
  },
  methods: {},
};
</script>

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

这是我做的源码

大家看看这个watch的位置，去监听表格中的数据，并通过immediate：true立即执行对应的回调函数

注意上述table中，需要绑定个id，并是响应式的id   “ref ”，