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

简介: #yyds干货盘点 【React工作记录一百零一】再次接触老朋友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

相关文章
|
1月前
|
前端开发 JavaScript 安全
使用React、TypeScript和Ant Design构建现代化前端应用
使用React、TypeScript和Ant Design构建现代化前端应用
24 0
|
8月前
|
API
React+Hook+ts+antDesign实现table行编辑功能(1)
React+Hook+ts+antDesign实现table行编辑功能
82 0
|
4月前
|
存储 前端开发
React & webpack &ant 学习
React & webpack &ant 学习
44 0
|
5月前
|
前端开发
从零开始学习React-引入Ant Design 组件(八)
从零开始学习React-引入Ant Design 组件(八)
51 0
|
8月前
|
前端开发 数据格式
再次接触老朋友react+ant design table合并单元格
再次接触老朋友react+ant design table合并单元格
94 0
|
8月前
|
前端开发 数据处理
React+Hook+ts+antDesign实现table行编辑功能(2)
React+Hook+ts+antDesign实现table行编辑功能
70 0
|
前端开发
#私藏项目实操分享# 【React工作记录十三】关于ant design table组件里面文字溢出
#私藏项目实操分享# 【React工作记录十三】关于ant design table组件里面文字溢出
142 0
#私藏项目实操分享# 【React工作记录十三】关于ant design table组件里面文字溢出
|
3月前
|
设计模式 前端开发 数据可视化
【第4期】一文了解React UI 组件库
【第4期】一文了解React UI 组件库
98 0
|
3月前
|
存储 前端开发 JavaScript
【第34期】一文学会React组件传值
【第34期】一文学会React组件传值
31 0
|
3月前
|
资源调度 前端开发 JavaScript
React 的antd-mobile 组件库,嵌套路由
React 的antd-mobile 组件库,嵌套路由
40 0