element ui 表格多项合并

<template>
  <div>
    <el-table
      :data="tableData"
      :span-method="objectSpanMethod"
      border
      style="width: 100%; margin-top: 20px"
    >
      <el-table-column type="index" width="50"> </el-table-column>
      <el-table-column prop="a1" label="a1"> </el-table-column>
      <el-table-column prop="a2" label="a2"> </el-table-column>
      <el-table-column prop="a3" label="a3"> </el-table-column>
      <el-table-column prop="a4" label="a4"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 合并数据
      row: [],
      // 传入纵向合并
      column: ["a1", "a2", "a3", "a4"],
      tableData: [
        {
          a1: "日期",
          a2: "地址",
          a3: "姓名",
          a4: "性别",
        },
        {
          a1: "日期1",
          a2: "地址",
          a3: "姓名",
          a4: "性别2",
        },
        {
          a1: "日期1",
          a2: "地址",
          a3: "姓名2",
          a4: "性别",
        },
        {
          a1: "日期",
          a2: "地址",
          a3: "姓名",
          a4: "性别3",
        },
        {
          a1: "日期",
          a2: "地址",
          a3: "姓名",
          a4: "性别3",
        },
      ],
    };
  },
  created() {
    this.row = this.rowMergeHandle(this.column, this.tableData);
  },
  methods: {
    mergeAction(val, rowIndex) {
      let _row = this.row[val].arr[rowIndex];
      let _col = _row > 0 ? 1 : 0;
      return [_row, _col];
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      for (let res in this.column) {
        if (this.column[res] == column.property) {
          return this.mergeAction(column.property, rowIndex, columnIndex);
        }
      }
    },
    rowMergeHandle(arr, data) {
      if (!Array.isArray(arr) && !arr.length) return false;
      if (!Array.isArray(data) && !data.length) return false;
      let obj = {};
      arr.forEach((i, idx) => {
        obj[i] = {
          arr: [],
          num: 0,
        };
        if (idx == 0) {
          data.forEach((item, index) => {
            // 表格首个数据单独处理
            if (index === 0) {
              obj[i].arr.push(1);
              obj[i].num = 0;
            } else {
              if (item[i] === data[index - 1][i]) {
                obj[i].arr[obj[i].num] += 1;
                obj[i].arr.push(0);
              } else {
                obj[i].arr.push(1);
                obj[i].num = index;
              }
            }
          });
        } else {
          let firstarr = obj[arr[0]].arr;
          let firstarrDeal = [];
          firstarr.forEach((item, index) => {
            if (item > 0) {
              firstarrDeal.push(index);
            }
          });
          data.forEach((item, index) => {
            let sign = false;
            if (firstarrDeal.indexOf(index) > 0) {
              obj[i].num = index;
              sign = true;
            }
            // 表格首个数据单独处理
            if (index === 0) {
              obj[i].arr.push(1);
              obj[i].num = 0;
            } else {
              if (item[i] === data[index - 1][i]) {
                if (sign) {
                  obj[i].arr.push(1);
                } else {
                  obj[i].arr[obj[i].num] += 1;
                  obj[i].arr.push(0);
                }
              } else {
                obj[i].arr.push(1);
                obj[i].num = index;
              }
            }
          });
        }
      });
      return obj;
    },
  },
};
</script>

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