【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

相关文章
|
2月前
|
资源调度 JavaScript 前端开发
使用vite+react+ts+Ant Design开发后台管理项目(二)
使用vite+react+ts+Ant Design开发后台管理项目(二)
|
2月前
|
前端开发 计算机视觉
React使用antd实现可编辑单元格
React结合Ant Design实现可编辑单元格的表格组件,通过EditableRow和EditableCell封装实现单元格编辑功能,并提供saveFun回调保存编辑内容。
93 1
|
2月前
|
前端开发
react antd点击table行时加选中背景色
react antd点击table行时加选中背景色
84 5
|
3月前
|
前端开发 JavaScript 数据库
在 React 项目中 Editable Table 的实现
由于我们是把 state 存放在父组件的,每次请求会造成 table 进行 render 一遍,如果再加入 loading 等状态,render 次数会更多。Table 组件默认情况下没有对 rerender 行为做优化,父组件更新,如果 columns 中的提供了自定义 render 方法, 对应的每个 Cell 都会重新 render 。 针对这种情况我们就需要进行优化,根据 shouldCellUpdate 来自定义渲染时机。 那么每个 Cell 的渲染时机应该是: 1. FormItem 增删位置变动时 2. 该 Cell 消费的对应 tableOptions 变动时 第一种情况很好判
55 1
|
6月前
|
前端开发 JavaScript 安全
使用React、TypeScript和Ant Design构建现代化前端应用
使用React、TypeScript和Ant Design构建现代化前端应用
185 0
|
6月前
|
前端开发
react使用ant desgin 组件实现便利开发
react使用ant desgin 组件实现便利开发
|
11月前
|
存储 前端开发
React & webpack &ant 学习
React & webpack &ant 学习
71 0
|
11天前
|
前端开发 JavaScript 开发者
颠覆传统:React框架如何引领前端开发的革命性变革
【10月更文挑战第32天】本文以问答形式探讨了React框架的特性和应用。React是一款由Facebook推出的JavaScript库,以其虚拟DOM机制和组件化设计,成为构建高性能单页面应用的理想选择。文章介绍了如何开始一个React项目、组件化思想的体现、性能优化方法、表单处理及路由实现等内容,帮助开发者更好地理解和使用React。
39 9
|
1月前
|
前端开发
深入解析React Hooks:构建高效且可维护的前端应用
本文将带你走进React Hooks的世界,探索这一革新特性如何改变我们构建React组件的方式。通过分析Hooks的核心概念、使用方法和最佳实践,文章旨在帮助你充分利用Hooks来提高开发效率,编写更简洁、更可维护的前端代码。我们将通过实际代码示例,深入了解useState、useEffect等常用Hooks的内部工作原理,并探讨如何自定义Hooks以复用逻辑。
|
1月前
|
前端开发 JavaScript API
探索React Hooks:前端开发的革命性工具
【10月更文挑战第5天】探索React Hooks:前端开发的革命性工具