antdTable动态合并单元格

原创已于 2022-03-04 10:52:44 修改 · 1.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #react.js #前端

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

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

在这里插入图片描述

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 = mergeCells(record.daily_place_id, this.state.tableData, 'daily_place_id', index)
            return obj
          } else {
            return text
          }
        },
      },
      {
        title: '配送地点',
        width: '280px',
        dataIndex: 'place_name',
        render: (text, record, index) => {
          if (record.daily_place_id) {
            const obj = {
              children: text !== null ? text : '',
              props: {}
            }
            obj.props.rowSpan = mergeCells(record.daily_place_id, this.state.tableData, 'daily_place_id', index)
            return obj
          } else {
            return text
          }
        },
      },
      {
        title: '订餐份数',
        width: '90px',
        dataIndex: 'order_meal_count',
        render: (text, record, index) => {
          if (record.daily_place_id) {
            const obj = {
              children: text !== null ? text : '',
              props: {}
            }
            obj.props.rowSpan = mergeCells(record.daily_place_id, this.state.tableData, 'daily_place_id', index)
            return obj
          } else {
            return text
          }
        },
      },
      {
        title: '教师餐',
        width: '80px',
        dataIndex: 'teacher_meal_count',
        render: (text, record, index) => {
          if (record.daily_place_id) {
            const obj = {
              children: text !== null ? text : '',
              props: {}
            }
            obj.props.rowSpan = mergeCells(record.daily_place_id, this.state.tableData, 'daily_place_id', index)
            return obj
          } else {
            return text
          }
        },
      },
      {
        title: '配送份数',
        width: '90px',
        dataIndex: 'deliver_meal_count',
        render: (text, record, index) => {
          const obj = {
            children: text !== null ? text : '',
            props: {}
          }
          obj.props.rowSpan = mergeCells(record.daily_place_id, this.state.tableData, 'daily_place_id', index)
          return obj
        }
      },
      {
        title: '餐箱号',
        width: '120px',
        dataIndex: 'box_number',
        render: (text, record, index) => {
          if (!record.daily_place_id) {
            const obj = {
              children: <div className={'box_num'}>{text !== null ? text : ''}</div>,
              props: {}
            }
            obj.props.rowSpan = mergeCells(record.daily_place_id, this.state.tableData, 'daily_place_id', index)
            return obj
          } else {
            return text == 0 ? '--' : <div>
              <div className='box_num'>{text}</div>
              <a style={{ float: 'right' }} disabled={record.out_lock ? true : false} onClick={this.adjustment.bind(this,record)}>调箱</a>
            </div>
          }
        },
      },
      {
        title: '数量',
        width: '70px',
        dataIndex: 'box_meal_count',
        render: (text, record, index) => {
          const obj = {
            children: text !== null ? text : '',
            props: {}
          }
          obj.props.rowSpan = mergeCells(record.daily_place_id, this.state.tableData, 'daily_place_id', index)
          return obj
        }
      },
      {
        title: '配送量统计',
        width: '180px',
        dataIndex: 'deliver_stat',
        render: (text, record, index) => {
          const obj = {
            children: text !== null ? text : '',
            props: {}
          }
          obj.props.rowSpan = mergeCells(record.daily_place_id, this.state.tableData, 'daily_place_id', index)
          return obj
        }
      },
      {
        title: '备注',
        dataIndex: 'box_detail',
       },
    ]
  }

  render() {
    const { loading, tableData,  } = this.state
    return (
      <Card>
        <Row gutter={[8]}>
          <Col span={20}>
            <Table
              bordered
              loading={loading}
              columns={this.columns}
              scroll={{ x: 1200 }}
              dataSource={tableData}
              pagination={false}
            />
          </Col>
        </Row>
      </Card>
    )
  }
}

export default Index```