vue.js el-table 动态单元格列合并

一、业务需求：

一个展示列表，表格中有一部分列是根据后端接口动态展示，对于不同类型的数据展示效果不一样。如果接口返回数据是’类型1‘的，则正常展示，如果是’类型2‘的数据，则合并当前数据的动态表格。

二、实现思路：

1、先将普通表格实现，不考虑合并效果；

2、在表格上对要合并的单元格类型进行区分；

3、 在表格上使用:span-method="arraySpanMethod"方法触发表格；

4、在arraySpanMethod方法内接收数据处理合并，确定从哪一列开始合并到哪一列合并结束；

三、代码展示：

    
    
    
      
    
    
      
    
    
    
      
    
  

// --------------methods方法--------------------

// 右侧表格
  initTable() {
    const params = {
      pageNum: this.pages.pageIndex,
      pageSize: this.pages.pageSize,
    }
    this.tableLoading = true
    //api接口调用xxx
    xxx(params)
      .then((res) => {
        if (res.code === 200) {
          const { total } = res.result
          // const { records, total } = res.result
          //后端接口数据返回形式如下：
          const records = [
            {
              indexShowName: '测试001',
              type: '1',
              reportDate: '2023-12-01 15:53:46',
              uploadValueList: [
                {
                  id: '1',
                  year: '2021年',
                  uploadValue: '0',
                  uploadValueName: '完全符合'
                },
                {
                  id: '2',
                  year: '2022年',
                  uploadValue: '0',
                  uploadValueName: '完全符合'
                },
                {
                  id: '3',
                  year: '2023年',
                  uploadValue: '0',
                  uploadValueName: '完全符合'
                },
                {
                  id: '4',
                  year: '2024年',
                  uploadValue: '0',
                  uploadValueName: '完全符合'
                }
              ]
            },
            {
              indexShowName: '测试002',
              type: '2',
              reportDate: '2023-12-01 13:45:53',
              uploadValueList: [
                {
                  id: '5',
                  year: '2021年',
                  uploadValue: '99.00'
                },
                {
                  id: '6',
                  year: '2022年',
                  uploadValue: '98.00'
                },
                {
                  id: '7',
                  year: '2023年',
                  uploadValue: '77.00'
                },
                {
                  id: '8',
                  year: '2024年',
                  uploadValue: '34.00'
                }
              ]
            }
          ]
          if (records && records.length > 0) {
            // 使用第一个元素的 uploadValueList 来创建列
            this.tableColumns = records[0].uploadValueList.map((item) => ({
              year: item.year, // 使用 year 作为列的标签
              id: item.id // 用于做key
            }))
          }
          this.tableData = records
          this.pages.total = total
        } else {
          this.$message.error(res.message)
        }
      })
      .finally(() => {
        this.tableLoading = false
      })
  },

  // 单元格合并 {当前行row、当前列column、当前行号rowIndex、当前列号columnIndex}
  arraySpanMethod({ row, column, rowIndex, columnIndex }) {
    // 类型1,且动态数据长度>1
    if (row.type === '1' && row?.uploadValueList?.length > 1) {
      const len = row?.uploadValueList?.length
      // 合并从下标为0开始的【下标为3的第四列，动态数据长度】
      if ( columnIndex > 2 && columnIndex <= 2 + Number(len) ) {
        return {
          rowspan: 1,
          colspan: columnIndex === 3 ? len : 0
        }
      }
    }
  },