#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

相关文章
|
资源调度 JavaScript 前端开发
使用vite+react+ts+Ant Design开发后台管理项目(二)
使用vite+react+ts+Ant Design开发后台管理项目(二)
|
前端开发
react antd点击table行时加选中背景色
react antd点击table行时加选中背景色
384 5
|
前端开发 JavaScript 数据库
在 React 项目中 Editable Table 的实现
由于我们是把 state 存放在父组件的,每次请求会造成 table 进行 render 一遍,如果再加入 loading 等状态,render 次数会更多。Table 组件默认情况下没有对 rerender 行为做优化,父组件更新,如果 columns 中的提供了自定义 render 方法, 对应的每个 Cell 都会重新 render 。 针对这种情况我们就需要进行优化,根据 shouldCellUpdate 来自定义渲染时机。 那么每个 Cell 的渲染时机应该是: 1. FormItem 增删位置变动时 2. 该 Cell 消费的对应 tableOptions 变动时 第一种情况很好判
457 1
|
前端开发 JavaScript 安全
使用React、TypeScript和Ant Design构建现代化前端应用
使用React、TypeScript和Ant Design构建现代化前端应用
805 0
react使用ant desgin 组件实现便利开发
react使用ant desgin 组件实现便利开发
|
存储 前端开发
React & webpack &ant 学习
React & webpack &ant 学习
142 0
|
资源调度 前端开发
#私藏项目实操分享# 【练习案例React六】项目中开始引入ant模块
#私藏项目实操分享# 【练习案例React六】项目中开始引入ant模块
287 0
#私藏项目实操分享# 【练习案例React六】项目中开始引入ant模块
|
设计模式 前端开发 数据可视化
【第4期】一文了解React UI 组件库
【第4期】一文了解React UI 组件库
897 0
|
存储 前端开发 JavaScript
【第34期】一文学会React组件传值
【第34期】一文学会React组件传值
269 0
|
资源调度 前端开发 JavaScript
React 的antd-mobile 组件库,嵌套路由
React 的antd-mobile 组件库,嵌套路由
519 0