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

简介: #yyds干货盘点 再次接触老朋友react+ant design table合并单元格

第三个功能 如何通过定时器渲染

根据数据返回的条数进行累加 累加到最大条数置为0


useEffect(() => {
    const timer = setInterval(() => {
      if (pageIndex == total || pageIndex == 10) {
        setPageIndex(0)
      } else {
        setPageIndex(pageIndex + 1)
      }
    }, delay)
    return () => clearInterval(timer)
  }, [pageIndex, total])




通过接口的接口赋值 完成 pageIndex变化的时候重新调用接口


useEffect(() => {
    initMenuList();
  }, [pageIndex]);


image.png


第四个功能 增加合计

<Table dataSource={dataSource} columns={columns} pagination={false}  summary={data => {
                        let totalCount = 0;
                        return (
                            <>
                                <Table.Summary.Row>
                                    <Table.Summary.Cell index={0}>合计</Table.Summary.Cell>
                                    <Table.Summary.Cell index={1}>
                                    </Table.Summary.Cell>
                                    <Table.Summary.Cell index={2}>
                                    </Table.Summary.Cell>
                                    <Table.Summary.Cell index={3}>
                                    </Table.Summary.Cell>
                                    <Table.Summary.Cell index={4}>
                                        <span>{total}</span>
                                    </Table.Summary.Cell>
                                </Table.Summary.Row>
                            </>
                        );
                    }} />;




直接summary完成数据合计 对应再对应的值上面即可 继续接口返回


image.png

相关文章
|
资源调度 JavaScript 前端开发
使用vite+react+ts+Ant Design开发后台管理项目(二)
使用vite+react+ts+Ant Design开发后台管理项目(二)
|
前端开发 计算机视觉
React使用antd实现可编辑单元格
React结合Ant Design实现可编辑单元格的表格组件,通过EditableRow和EditableCell封装实现单元格编辑功能,并提供saveFun回调保存编辑内容。
710 1
|
前端开发 JavaScript 安全
使用React、TypeScript和Ant Design构建现代化前端应用
使用React、TypeScript和Ant Design构建现代化前端应用
807 0
react使用ant desgin 组件实现便利开发
react使用ant desgin 组件实现便利开发
|
存储 前端开发
React & webpack &ant 学习
React & webpack &ant 学习
143 0
|
前端开发
从零开始学习React-引入Ant Design 组件(八)
从零开始学习React-引入Ant Design 组件(八)
323 0
|
前端开发
#私藏项目实操分享# 【React工作记录十三】关于ant design table组件里面文字溢出
#私藏项目实操分享# 【React工作记录十三】关于ant design table组件里面文字溢出
315 0
#私藏项目实操分享# 【React工作记录十三】关于ant design table组件里面文字溢出
|
设计模式 前端开发 数据可视化
【第4期】一文了解React UI 组件库
【第4期】一文了解React UI 组件库
902 0
|
存储 前端开发 JavaScript
【第34期】一文学会React组件传值
【第34期】一文学会React组件传值
272 0
|
资源调度 前端开发 JavaScript
React 的antd-mobile 组件库,嵌套路由
React 的antd-mobile 组件库,嵌套路由
519 0