合并行---

实现逻辑

• 使用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="state.tableData" max-height="340px" 
    :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px">
    <el-table-column prop="typeName" label="评估类型" width="180" align="center" />
    ...
</el-table>

//动态合并行，表格
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }: any) => {
    let num = 1
    // 根据columnIndex判断需要判断值是否相等的字段
    // standardFirstName,standardSecondName,dataItem及tableData需要改为自己的项目字段---重要---
    //columnIndex:0 表示第一列；columnIndex:1 表示第二列
    if (columnIndex === 0) {
        num = recursionRowSpan(row, rowIndex, 'typeName', state.tableData)
    }
    return {
        rowspan: num,
        colspan: 1,
    };
}
// 通过递归获取单元格所占大小
let nowRowSpan = 1;
const recursionRowSpan: any = (row: any, rowIndex: number, str: string, data: any) => {
    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, 
    }
}

实例图片：