前言
大家好 我是歌谣 今天继续开发一个需求 就是我们的大屏需求 今天让我们一步步 解决所遇到的问题
第一个功能 如何渲染
参照官网案例
``` 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', }, ];
; ```
当我们看完了这个基础案例以后 相信我们就已经清楚该定义数据格式了
最终数据格式
结果(解决)
第二个功能 如何合并
直接看全部代码 进行重点讲解
定义处理column哥的方法 加入render
``` const handleColumn = (columns) => {
for (let i = 0; i < columns.length; i++) {
if (columns[i]?.dataIndex == "cuttingName") {
columns[i].render = data
} else if (columns[i]?.dataIndex == "colorName") {
columns[i].render = dataColor
}
}
return columns
} ```
datacolor处理合并逻辑
datacolor是一个函数 下面看我的定义
const dataColor = (value, row, index) => { const obj = { children: value, props: { rowSpan: 1 }, } if (columns.length > 0) { return filterNumData(obj, dataSource, row, index, 'colorName') } else { return obj } }
if判断特别关键 不然刚刷新页面就会报错 因为render找不到对应属性
filterNumData处理合并逻辑核心
const filterNumData = (obj, arr, record, index, flag) => { let length = 0 if (arr.length > 0) { for (let i = index; i < arr.length; i++) { if (i === arr.length - 1 && arr.length != 1) { if (arr[i - 1][`${flag}`] === record[`${flag}`]) { length += 1 break } } else { if (arr[i][`${flag}`] === record[`${flag}`]) { length += 1 } else { break } } } }
五个属性 我们分别讲解 obj 自己定义了 看如上 const obj = { children: value, props: { rowSpan: 1 }, } dataSource返回的数据
row render自带 index render自带 colorName 要合并的属性 最后重新setState columns 合并完成
第三个功能 如何通过定时器渲染
根据数据返回的条数进行累加 累加到最大条数置为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]);
第四个功能 增加合计
<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完成数据合计 对应再对应的值上面即可 继续接口返回
总结
以上就是真实项目中解决问题的思路和写法 我是歌谣 微信公众号关注前端小歌谣 带你进入强大的前端巅峰人才交流群
