合并单元格

<template>
  <div class="main">
    <el-table :data="tableData" :span-method="objectSpanMethod" style="width: 100%" border>
      <el-table-column v-for="(item, index) in tableColumn" :key="index" :prop="item.prop" :label="item.label" />
    </el-table>
    <aSad />
  </div>
</template>

<script>
import { getMergeCells } from "@/views/mydemo/baseurl";

export default {
  data() {
    return {
      tableColumn: [
        { prop: "id", label: "序号" },
        { prop: "School", label: "学校" },
        { prop: "Grade", label: "年级" },
        { prop: "Class", label: "班级" },
        { prop: "Name", label: "姓名" },
        { prop: "Chinese", label: "中文" },
        { prop: "Math", label: "数学" },
        { prop: "English", label: "英文" }
      ],
      tableData: [
        { id: 1, School: "第一小学", Grade: "1年级", Class: "1班", Name: "张三", Chinese: "90", Math: "100", English: "80" },
        { id: 2, School: "第一小学", Grade: "1年级", Class: "1班", Name: "张伟", Chinese: "90", Math: "99", English: "89" },
        { id: 3, School: "第一小学", Grade: "1年级", Class: "1班", Name: "李四", Chinese: "90", Math: "85", English: "80" },
        { id: 4, School: "第一小学", Grade: "1年级", Class: "2班", Name: "李四2", Chinese: "90", Math: "85", English: "80" },
        { id: 5, School: "第一小学", Grade: "1年级", Class: "3班", Name: "王五", Chinese: "920", Math: "100", English: "80" },
        { id: 6, School: "第一小学", Grade: "2年级", Class: "1班", Name: "赵六", Chinese: "9210", Math: "100", English: "80" },
        { id: 7, School: "第一小学", Grade: "2年级", Class: "2班", Name: "钱八", Chinese: "982", Math: "85", English: "80" },
        { id: 8, School: "第一小学", Grade: "2年级", Class: "3班", Name: "陈九", Chinese: "79", Math: "100", English: "100" },
        { id: 9, School: "第一小学", Grade: "3年级", Class: "1班", Name: "黄十", Chinese: "91", Math: "88", English: "80" },
        { id: 10, School: "第一小学", Grade: "3年级", Class: "2班", Name: "魏一", Chinese: "90", Math: "86", English: "87" },
        { id: 11, School: "第一小学", Grade: "3年级", Class: "3班", Name: "杨二", Chinese: "79", Math: "99", English: "80" },
        { id: 12, School: "第二小学", Grade: "3年级", Class: "3班", Name: "袁零", Chinese: "79", Math: "99", English: "80" }
      ]
    };
  },
  computed: {
    // 获取所有单元格合并数据
    spanArr() {
      if (!this.tableColumn.length) return [];
      const mergeCols = ["School", "Class", "Grade", "Chinese"]; // 需要合并的列（字段）
      return getMergeCells(this.tableData, this.tableColumn, mergeCols);
    }
  },

  methods: {
    // 表数据合并
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      return this.spanArr[rowIndex][columnIndex];
    }
  }
};
</script>
<style lang="scss" scoped>
.main {
  width: 100%;
  height: 100%;
}
</style>

/**
 * 分析每一列，找出所有【列】可合并（数据相同）的单元格
 * @param {Array} tableData 表数据
 * @param {Array} tableColumn 表字段/表头
 * @param {Array} mergeCols 指定合并哪些列（字段）
 * @returns
 */
export const getMergeCells = (tableData = [], tableColumn = [], mergeCols = []) => {
  const fields = tableColumn?.map((v) => v.prop);
  const array = [];

  if (!tableData?.length || !tableColumn?.length || !mergeCols?.length) return;

  // 倒叙遍历行（方便统计合并列单元格数至最上方，避免表格塌陷）
  for (let row = tableData.length - 1; row >= 0; row--) {
    array[row] = [];
    for (let col = 0; col < fields.length; col++) {
      // 1.最后一行单元格不合并（初始无可对比数据）
      // 2.不在指定列（mergeCols）的单元格不合并
      // 3.空值不合并
      if (row === tableData.length - 1 || !mergeCols.includes(fields[col]) || !tableData[row][fields[col]]) {
        array[row][col] = [1, 1];
        continue;
      }

      // 4.数据相同但所属父级不一致的单元格不合并
      const parentFields = mergeCols.slice(0, col); // 在指定合并列中找出所有父级
      if (mergeCols.includes(fields[col]) && parentFields?.includes(fields[col - 1])) {
        const currentParents = parentFields.map((field) => tableData[row][field]); // 当前单元格所有父级
        const nextRowParents = parentFields.map((field) => tableData[row + 1][field]); // 下一行单元格所有父级
        if (currentParents?.toString() !== nextRowParents?.toString()) {
          array[row][col] = [1, 1];
          continue;
        }
      }

      // 5.合并相同数据的单元格
      if (tableData[row][fields[col]] === tableData[row + 1][fields[col]]) {
        const beforeCell = array[row + 1][col];
        array[row][col] = [1 + beforeCell[0], 1];
        beforeCell[0] = 0;
        beforeCell[1] = 0;
      } else {
        array[row][col] = [1, 1]; // 否则不合并
      }
    }
  }
  // console.log(array, 'array')
  return array;
};