【React工作记录一百零一】再次接触老朋友react+ant design table合并单元格

前端大歌谣

于 2023-04-07 16:36:54 发布

阅读量90

点赞数

分类专栏：前端项目工作实战文章标签： react.js javascript ecmascript

本文链接：https://blog.csdn.net/geyaoisnice/article/details/130013257

版权

前端项目工作实战专栏收录该内容

143 篇文章 6 订阅 ¥39.90 ¥99.00

订阅专栏

超级会员免费看

本文详细记录了使用React和Ant Design Table组件实现表格数据渲染、单元格合并、定时器渲染及数据合计的步骤。通过实例代码讲解了如何处理column的render方法、datacolor和filterNumData的合并逻辑，以及通过接口动态更新数据。

摘要由CSDN通过智能技术生成

前言

大家好我是歌谣今天继续开发一个需求就是我们的大屏需求今天让我们一步步
解决所遇到的问题

第一个功能如何渲染

参照官网案例

const dataSource = [
  {
    key: '1',
    name: '胡彦斌',
    age: 32,
    address: '西湖区湖底公园1号',
  },
  {
    key: '2',
    name: '胡彦祖',
    age: 42,
    address: '西湖区湖底公园1号',
  },
];

const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: '住址',
    dataIndex: 'address',
    key: 'address',
  },
];

<Table dataSource={dataSource} columns={columns} />