antD 实现复杂结构的表格（合并单元格）

LMYH1123

已于 2022-05-03 10:48:31 修改

阅读量2.8k

点赞数 1

分类专栏： antD 文章标签：合并单元格 ant

于 2022-01-26 11:49:01 首次发布

本文链接：https://blog.csdn.net/lmyh1111/article/details/122698069

版权

antD 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1、先把请求返回的数据实现平铺；

2、通过colSpan/rowSpan属性实现表格行/列合并

请求返回的数据三维数组：

一、首先将多维数组转换成一维数组：

        responseData.map((responseDataItem,index2,) => {
            let type = true
            const len1 = responseDataItem.indicatorResultList.length
            responseDataItem.indicatorResultList.map((timeDataItem) => {
              const len2 = timeDataItem.scoreList.length
              timeDataItem.scoreList.map((scoreListItem, index) => {
                arr = [
                  ...arr,
                  {
                    zhibiao: timeDataItem.title,
                    description: timeDataItem.description,
                    standard: timeDataItem.standard,
                    title: `${responseDataItem.title}(${responseDataItem.weight}%)`,
                    weight: `${timeDataItem.weight}%`,
                    name: scoreListItem.employee.name,
                    score: scoreListItem.score,
                    comment: scoreListItem.comment,
                    totalScore: timeDataItem.totalScore,
                    id: responseDataItem.id,
                    titleSpan: Number(`${ type ? len2*len1 : 0}`),
                    twoSpan:index === 0 ? len2 : 0,
                  },
                ]
                type = false
                return arr
              })
            })
          })
          this.data = arr

转换的数据格式：（一维数组）

二、通过antD合并的属性rowSpan设置：

this.columns = [
      {
        title: '维度',
        dataIndex: 'title',
        width: 100,
        customRender(_, row) {
          return {
            children: row.title,
            attrs: {
              rowSpan: row.titleSpan,
            },
          }
        },
      },
       {
        title: '绩效评分',
        children: [
          {
            title: '评分人',
            dataIndex: 'name',
            width: 200,
            customRender: renderContent,
          },
          {
            title: '评分',
            dataIndex: 'score',
            customRender: renderContent,
          },
          {
            title: '评语',
            dataIndex: 'comment',
            customRender: renderContent,
            width: 200,
          },
        ],
      },
]

最终实现效果：