合并行---

实现逻辑

• 使用span-method属性，返回对象{rowspan: num,colspan: 1},

• 如果需要合并第一行和第二行，那么第一行返回值为{rowspan: 2,colspan: 1}，第二行返回值：{rowspan: 2,colspan: 1}

• 所以核心是设置rowspan的值，

• 通过递归的方式，判断相邻行的值是否一致：

1. 判断前一行与该行值是否一致，如果一致rowspan置为0
2. 如果不等则判断下一行与该行值是否相等，如果一致则该项rowspan的值+1，不一致则rowspan的值置为1

示例代码：

<el-table :data="tableData" style="width: 100%" :span-method="objectSpanMethod"></el-table>

const objectSpanMethod = ({row, column, rowIndex, columnIndex}: any) => {
  let num = 1
  // 根据columnIndex判断需要判断值是否相等的字段
  // standardFirstName,standardSecondName,dataItem及tableData需要改为自己的项目字段-----------重要...重要...重要...--------
  if (columnIndex === 0) {
    num = recursionRowSpan(row, rowIndex, 'standardFirstName', tableData)
  }
  if (columnIndex === 1) {
    num = recursionRowSpan(row, rowIndex, 'standardSecondName', tableData)
  }
  if (columnIndex === 2) {
    num = recursionRowSpan(row, rowIndex, 'dataItem', tableData)
  }
  return {
    rowspan: num,
    colspan: 1,
  };
}
// 通过递归获取单元格所占大小
let nowRowSpan = 1;
const recursionRowSpan = (row, rowIndex, str, data) => {
  let num: number = 0;
  // row[str] == data[rowIndex - 1][str]这个用来判断是否合并，可以改为自己的判断方法
  // 判断上一行字段的值与改行值是否一致
  if (nowRowSpan == 1 && rowIndex > 0 && row[str] == data[rowIndex - 1][str]) {
    return 0;
  }
  // 判断下一行字段的值与改行值是否一致
  if (rowIndex + 1 < data.length && row[str] == data[rowIndex + 1][str]) {
    nowRowSpan++;
    num = rowIndex + 1;
    return recursionRowSpan(data[num], num, str, data);
  } else {
    num = nowRowSpan;
    nowRowSpan = 1;
    return num;
  }
}

示例图片

合并列---

实现逻辑

• 合并列比较简单，判断合并那一列然后返回{rowspan: 1,colspan: num}

示例代码：

<el-table :data="tableData" style="width: 100%" :span-method="objectSpanMethod"></el-table>
// 合并单元格
const objectSpanMethod = ({row, column, rowIndex, columnIndex}: any) => {
  let num = 1
  if (columnIndex === 0) {
    num = 2
  }
  if (columnIndex === 1) {
    num = 0
  }
  return {
    rowspan: 1,
    colspan: num,
  };
}

示例图片