【vue+elementui】el-table合并单元格

通过给table传入span-method方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象。

需求：

1. 树形数据结构扁平化

2. 一般情况下，数据列都是固定，行为合并项

3. 确定合并项的起始行索引以及合并行数！

   规则：第一次从第0行开始合并，第二次合并的开始位置是第一次开始合并的位置加上合并行

核心代码：

• 模拟后台返回的数据

tableData: [
    {
            voucherId: 100,
          businessDate: "2020-11-16",
          voucherNumber: 1,
            entryInfo: [
                {
                        brief: "摘要一",
                        urrId: 2059,
            accountSubject: "其他货币资金",
            trsamtd: 200,
            trsamtc: 0,
                },
                {
                        brief: "摘要二",
                        urrId: 2060,
            accountSubject: "应收股利",
            trsamtd: 0,
            trsamtc: 120,
                },
                {
                        brief: "摘要三",
                        urrId: 2061,
            accountSubject: "未实现融资收益",
            trsamtd: 0,
            trsamtc: 80,
                }
            ]              
           createZh: "Iris",
           checkZh: "Iris",
           status: 2,
    },
    {
            voucherId: 101,
          businessDate: "2020-11-17",
          voucherNumber: 2,
            entryInfo: [
                {
                        brief: "摘要一",
                        urrId: 2070,
            accountSubject: "其他货币资金",
            trsamtd: 100,
            trsamtc: 0,
                },
            ]              
           createZh: "Iris",
           checkZh: "Iris",
           status: 1,
    },
    {
            voucherId: 102,
          businessDate: "2020-11-18",
          voucherNumber: 3,
            entryInfo: [
                {
                        brief: "摘要一",
                        urrId: 2059,
            accountSubject: "其他货币资金",
            trsamtd: 200,
            trsamtc: 0,
                },
                {
                        brief: "摘要二",
                        urrId: 2060,
            accountSubject: "应收股利",
            trsamtd: 0,
            trsamtc: 200,
                },
            ]              
           createZh: "Iris",
           checkZh: "Iris",
           status: 2,
    },
]

• 数据扁平化处理

getIndex(tableDataList){
        let arr = []  // 保存表格合并需要的数据
    let s = 0   // 合并初始位置
    let getTable = []  // 把原始数据中的子数据提取出来，生成新的可合并数据
    tableDataList.forEach((item, i, data) => {
                // 第二次合并开始位置
        if (arr.length) {
            s = arr[arr.length - 1].row + data[i - 1].entryInfo.length
        }
        arr.push({
            row: s, // 保存表格合并的起始行
            index: item.entryInfo.length, // 每次需要合并几行
        })
        if (item.entryInfo && item.entryInfo.length) 
            item.entryInfo.forEach(subItem => {
                getTable.push({
                    voucherId: item.voucherId,
                    businessDate: item.businessDate,
                    voucherNumber: item.voucherNumber,
                    brief: subItem.brief,
                    urrId: subItem.urrId,
                    accountSubject: subItem.accountSubject,
                    trsamtd: subItem.trsamtd,
                    trsamtc: subItem.trsamtc,
                    createZh: item.createZh,
                    checkZh: item.checkZh,
                    status: item.status,
                })
            })
        }
    })
    this.spanArray = arr
    this.tableDataList = getTable  
}

• 合并

SpanMethod(data) {
    let { rowIndex, column } = data
    if (
        !column.property ||
        column.property === 'businessDate' ||
        column.property === 'voucherNumber' ||
        column.property === 'createZh' ||
        column.property === 'checkZh'
    ) {
        let obj = [0, 0]
        this.spanArray.some(v => {
            if (rowIndex === v.row) {
                obj = [v.index, 1]
            }
        })
        return obj
    }
},