vue 传参合并单元格

<template>
  <div>
    <table>
      <tr>
        <th>
          <el-button @click="showResult">合并单元格</el-button>
        </th>
      </tr>
      <tr>
        <th>
          <el-table
            :data="tableData1"
            border
            style="width: 100%; text-align: center"
          >
            <el-table-column
              v-for="(item, index) in tableTitle"
              :key="index"
              :prop="item.col"
              :label="item.name"
              :width="item.width"
              header-align="center"
            >
            </el-table-column>
          </el-table>
        </th>
        <th v-show="show">
          <el-table
            :data="tableData2"
            border
            style="width: 100%; text-align: center"
            :span-method="objectSpanMethod"
          >
            <el-table-column
              v-for="(item, index) in tableTitle"
              :key="index"
              :prop="item.col"
              :label="item.name"
              :width="item.width"
              header-align="center"
            >
            </el-table-column>
          </el-table>
        </th>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: "APP",
  data() {
    return {
      tableTitle: [
        {
          col: "grade",
          name: "年级",
          width: "80px",
        },
        {
          col: "clas",
          name: "班级",
          width: "80px",
        },
        {
          col: "group",
          name: "小组",
          width: "80px",
        },
        {
          col: "name",
          name: "姓名",
          width: "80px",
        },
      ],
      tableData1: [
        {
          grade: "一年级",
          clas: "二班",
          group: "一组",
          name: "张三",
        },
        {
          grade: "一年级",
          clas: "三班",
          group: "二组",
          name: "王五",
        },
        {
          grade: "一年级",
          clas: "三班",
          group: "三组",
          name: "李四",
        },
        {
          grade: "二年级",
          clas: "三班",
          group: "三组",
          name: "小明",
        },
        {
          grade: "二年级",
          clas: "一班",
          group: "三组",
          name: "花花",
        },
        {
          grade: "二年级",
          clas: "二班",
          group: "二组",
          name: "田七",
        },
        {
          grade: "二年级",
          clas: "二班",
          group: "二组",
          name: "小明",
        },
        {
          grade: "二年级",
          clas: "二班",
          group: "三组",
          name: "花花",
        },
      ],
      tableData2: [
        {
          grade: "一年级",
          clas: "二班",
          group: "一组",
          name: "张三",
        },
        {
          grade: "二年级",
          clas: "三班",
          group: "二组",
          name: "王五",
        },
        {
          grade: "一年级",
          clas: "三班",
          group: "三组",
          name: "李四",
        },
        {
          grade: "二年级",
          clas: "一班",
          group: "三组",
          name: "小明",
        },
        {
          grade: "二年级",
          clas: "一班",
          group: "三组",
          name: "花花",
        },
        {
          grade: "二年级",
          clas: "二班",
          group: "二组",
          name: "田七",
        },
        {
          grade: "二年级",
          clas: "二班",
          group: "二组",
          name: "小明",
        },
        {
          grade: "二年级",
          clas: "二班",
          group: "三组",
          name: "花花",
        },
      ],
      show: false,
      colArr: ["grade", "group"], // 有合并项的列
      arr: [],
    };
  },
  methods: {
    showResult() {
      this.show = !this.show;
    },
    //合并
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      let arr = this.arr;
      if (arr[columnIndex].length > 0) {
        if (arr[columnIndex][rowIndex] === 0) {
          return {
            rowspan: 0,
            colspan: 0,
          };
        } else {
          return {
            rowspan: arr[columnIndex][rowIndex],
            colspan: 1,
          };
        }
      }
    },
    SpanMethod(data) {
      let cot = [];
      for (let j = 0; j < this.colArr.length; j++) {
        let arr = [],
          arrcol = 0;
        arr[0] = 1;
        for (let i = 1; i < data.length; i++) {
          if (data[arrcol][this.colArr[j]] === data[i][this.colArr[j]]) {
            if (j < 1 || (j >= 1 && cot[j - 1][i] == 0)) {
              arr[arrcol]++;
              arr[i] = 0;
            } else {
              arr[i] = 1;
              arrcol = i;
            }
          } else {
            arr[i] = 1;
            arrcol = i;
          }
        }
        cot[j] = arr;
      }
      let Box = [];
      for (let i = 0; i < this.tableTitle.length; i++) {
        let col = this.colArr.indexOf(this.tableTitle[i].col);
        if (col >= 0) {
          Box[i] = cot[col];
        } else {
          Box[i] = [];
        }
      }
      return Box;
    },
  },
  created() {
    this.arr = this.SpanMethod(this.tableData2);
  },
};
</script>
<style></style>