antdTable动态合并单元格

Oh_MoG

已于 2022-03-04 10:52:44 修改

阅读量1.3k

点赞数 3

CC 4.0 BY-SA版权

文章标签： javascript react.js 前端

于 2022-03-04 10:50:14 首次发布

本文链接：https://blog.youkuaiyun.com/qq_41466219/article/details/123271282

本文详细介绍了如何在React.js项目中使用antd库的Table组件实现动态合并单元格的功能。通过设置rowSpan和colSpan属性，你可以根据具体数据灵活地合并表格中的行列，以达到更丰富的展示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

import React from 'react'
import {
  Table, Card, Row, Col, 
} from 'antd'
import './index.css'

function mergeCells(text, data, key, index) {
  if (index !== 0 && text === data[index - 1][key]) {
    return 0
  }
  let rowSpan = 1
  for (let i = index + 1; i < data.length; i++) {
    if (text !== data[i][key]) {
      break
    }
    rowSpan++
  }
  return rowSpan
}

class Index extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      loading: false,
      tableData: [],
    }
    this.columns = [
      {
        title: '序号',
        width: '60px',
        dataIndex: 'key',
        render: (text, record, index) => {
          if (record.daily_place_id) {
            const obj = {
              children: text !== null ? text : '',
              props: {}
            }
            obj.props.rowSpan = mergeC