element-ui中Table表格如何合并单元格（合并多列、前几列）

参考来之https://blog.csdn.net/weixin_38516688/article/details/86021359

主要代码

    merageInit() { // 在下文的时候会用到，对数据进行初始化是很有必要的
      this.paragraph_merageArr = [];
      this.paragraph_meragePos = 0;
      this.project_merageArr = [];
      this.project_meragePos = 0;
      this.branch_merageArr = [];
      this.branch_meragePos = 0;
    },
    // 合并多列专用
    merage() {
      this.merageInit(); // 前文的初始化数据函数
      for (let i = 0; i < this.tableData.length; i++) {
        if (i === 0) {
          // 第一行必须存在
          this.paragraph_merageArr.push(1);
          this.paragraph_meragePos = 0;
          this.project_merageArr.push(1);
          this.project_meragePos = 0;
          this.branch_merageArr.push(1);
          this.branch_meragePos = 0;
        } else {
          // 判断当前元素与上一个元素是否相同,eg：this.paragraph_meragePos 是 this.typeNameArr序号
          // 第一列
          if (this.tableData[i].paragraph === this.tableData[i - 1].paragraph) {
            this.paragraph_merageArr[this.paragraph_meragePos] += 1;
            this.paragraph_merageArr.push(0);
          } else {
            this.paragraph_merageArr.push(1);
            this.paragraph_meragePos = i;
          }
          // 第二列
          if (this.tableData[i].project === this.tableData[i - 1].project && this.tableData[i].paragraph === this.tableData[i - 1].paragraph) {
            this.project_merageArr[this.project_meragePos] += 1;
            this.project_merageArr.push(0);
          } else {
            this.project_merageArr.push(1);
            this.project_meragePos = i;
          }
          // 第三列
          if (this.tableData[i].branch === this.tableData[i - 1].branch && this.tableData[i].project === this.tableData[i - 1].project && this.tableData[i].paragraph === this.tableData[i - 1].paragraph) {
            this.branch_merageArr[this.branch_meragePos] += 1;
            this.branch_merageArr.push(0);
          } else {
            this.branch_merageArr.push(1);
            this.branch_meragePos = i;
          }
        }
      }
    },
    // 合并专用
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        // 第一列的合并方法
        const row1 = this.paragraph_merageArr[rowIndex];
        const col1 = row1 > 0 ? 1 : 0; // 如果被合并了row = 0; 则他这个列需要取消
        return {
          rowspan: row1,
          colspan: col1,
        };
      } else if (columnIndex === 1) {
        // 第二列的合并方法
        const row2 = this.project_merageArr[rowIndex];
        const col2 = row2 > 0 ? 1 : 0; // 如果被合并了row = 0; 则他这个列需要取消
        return {
          rowspan: row2,
          colspan: col2,
        };
      } else if (columnIndex === 2) {
        // 第三列的合并方法
        const row3 = this.branch_merageArr[rowIndex];
        const col3 = row3 > 0 ? 1 : 0; // 如果被合并了row = 0; 则他这个列需要取消
        return {
          rowspan: row3,
          colspan: col3,
        };
      }
    },

完整代码 vue单文件

summary-report.vue

<!-- 检测汇报->汇总 -->
<template lang="pug">
.summary1
  .title_exportBox(style="display: flex")
    .title 汇总表
  .boxTable
    el-table(
      :data="tableData",
      border,
      height="calc(100vh - 285px)",
      :header-cell-style="{ background: '#fff', color: '#555555', fontSize: '16px' }",
      :span-method="objectSpanMethod"
      v-loading="tableLoading"
    )
      el-table-column(v-if="paragraph_show === '1'" prop="paragraph", label="标段", align="center")
      el-table-column(prop="project", label="单位工程", align="center")
      el-table-column(prop="branch", label="分部工程", align="center")
      el-table-column(prop="name", label="检测项目", align="center")
      el-table-column(prop="constructionNum", label="施工完成数量", align="center")
      el-table-column(prop="inspectionNum", label="报检数量", align="center")
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "summary-report",
  components: {},
  props: {
  },
  data() {
    return {
      exportParams: {},
      tableLoading: false,
      pos: 0,
      spanArr: [],
      page_export:0,

      
      tableData: [ // 假数据
        {
          id: 1,
          paragraph: 'TJ01',
          project: '单位工程',
          branch: '分部工程',
          name: '--',
          constructionNum: '--',
          inspectionNum: '--',
        },
        {
          id: 2,
          paragraph: 'TJ01',
          project: '单位工程',
          branch: '分部工程',
          billing: '月/季/年制度',
          name: '--',
          constructionNum: '--',
          inspectionNum: '--',
        },
        {
          id: 3,
          paragraph: 'TJ01',
          project: '单位工程1',
          branch: '分部工程',
          name: '--',
          constructionNum: '--',
          inspectionNum: '--',
        },
        {
          id: 4,
          paragraph: 'TJ01',
          project: '单位工程2',
          branch: '分部工程',
          name: '--',
          constructionNum: '--',
          inspectionNum: '--',
        },
        {
          id: 5,
          paragraph: 'TJ02',
          project: '单位工程2',
          branch: '分部工程',
          name: '--',
          constructionNum: '--',
          inspectionNum: '--',
        },
        {
          id: 6,
          paragraph: 'TJ02',
          project: '单位工程1',
          branch: '分部工程',
          name: '--',
          constructionNum: '--',
          inspectionNum: '--',
        },
        {
          id: 7,
          paragraph: 'TJ02',
          project: '单位工程1',
          branch: '分部工程',
          name: '--',
          constructionNum: '--',
          inspectionNum: '--',
        },
        {
          id: 8,
          paragraph: 'TJ02',
          project: '单位工程',
          branch: '分部工程',
          name: '--',
          constructionNum: '--',
          inspectionNum: '--',
        },
      ],
      paragraph_merageArr: [],  // 第一列进行合并操作时存放的数组变量
      paragraph_meragePos: 0, // 上面的数组的下标值
      project_merageArr: [],  // 第二列进行合并操作时存放的数组变量
      project_meragePos: 0,// 上面的数组的下标值
      branch_merageArr: [], // 第三列进行合并操作时存放的数组变量
      branch_meragePos: 0,// 上面的数组的下标值
    };
  },
  computed: { ...mapGetters(["account_searchForm","inspectionDetection",'paragraph_show']) },
  watch: {
  },
  methods: {
    merageInit() { // 在下文的时候会用到，对数据进行初始化是很有必要的
      this.paragraph_merageArr = [];
      this.paragraph_meragePos = 0;
      this.project_merageArr = [];
      this.project_meragePos = 0;
      this.branch_merageArr = [];
      this.branch_meragePos = 0;
    },
    // 合并多列专用
    merage() {
      this.merageInit(); // 前文的初始化数据函数
      for (let i = 0; i < this.tableData.length; i++) {
        if (i === 0) {
          // 第一行必须存在
          this.paragraph_merageArr.push(1);
          this.paragraph_meragePos = 0;
          this.project_merageArr.push(1);
          this.project_meragePos = 0;
          this.branch_merageArr.push(1);
          this.branch_meragePos = 0;
        } else {
          // 判断当前元素与上一个元素是否相同,eg：this.paragraph_meragePos 是 this.typeNameArr序号
          // 第一列
          if (this.tableData[i].paragraph === this.tableData[i - 1].paragraph) {
            this.paragraph_merageArr[this.paragraph_meragePos] += 1;
            this.paragraph_merageArr.push(0);
          } else {
            this.paragraph_merageArr.push(1);
            this.paragraph_meragePos = i;
          }
          // 第二列
          if (this.tableData[i].project === this.tableData[i - 1].project && this.tableData[i].paragraph === this.tableData[i - 1].paragraph) {
            this.project_merageArr[this.project_meragePos] += 1;
            this.project_merageArr.push(0);
          } else {
            this.project_merageArr.push(1);
            this.project_meragePos = i;
          }
          // 第三列
          if (this.tableData[i].branch === this.tableData[i - 1].branch && this.tableData[i].project === this.tableData[i - 1].project && this.tableData[i].paragraph === this.tableData[i - 1].paragraph) {
            this.branch_merageArr[this.branch_meragePos] += 1;
            this.branch_merageArr.push(0);
          } else {
            this.branch_merageArr.push(1);
            this.branch_meragePos = i;
          }
        }
      }
    },
    // 合并专用
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        // 第一列的合并方法
        const row1 = this.paragraph_merageArr[rowIndex];
        const col1 = row1 > 0 ? 1 : 0; // 如果被合并了row = 0; 则他这个列需要取消
        return {
          rowspan: row1,
          colspan: col1,
        };
      } else if (columnIndex === 1) {
        // 第二列的合并方法
        const row2 = this.project_merageArr[rowIndex];
        const col2 = row2 > 0 ? 1 : 0; // 如果被合并了row = 0; 则他这个列需要取消
        return {
          rowspan: row2,
          colspan: col2,
        };
      } else if (columnIndex === 2) {
        // 第三列的合并方法
        const row3 = this.branch_merageArr[rowIndex];
        const col3 = row3 > 0 ? 1 : 0; // 如果被合并了row = 0; 则他这个列需要取消
        return {
          rowspan: row3,
          colspan: col3,
        };
      }
    },
  },
  created() {
    this.page_export = this.inspectionDetection.record_account.page_export;
  },
  mounted() {
    this.merage()
  }
};
</script>
<style lang="scss" scoped>
.title_exportBox {
  .title {
    width: calc(100% - 56px);
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    line-height: 34px;
    text-align: center;
  }
}
</style>