react实现一维表格、键值对数据表格key value表格

UI画的需求很抽象,直接把数据铺开,不能直接用antd组件了

上一行是name,下一行是value,总数不定,最后前端还要显示求和

javascript 复制代码
class OneDimensionTable extends React.Component {  
    render() {
        const { data } = this.props;
        let total = 0;
        data.map(item => total+=item.value);
        const tableData = [...data, {name: '合计', value: total}];
        const row = Math.trunc(tableData.length % 5 == 0 ? tableData.length/5 : tableData.length/5+1); //一行5个,可以改
        return (
            <table style={{border:'1px solid #1890ffd0', color:'white', fontSize: 12, width: 540}}>
            <tbody>
                {[...Array(row)].map((v, i) => (
                    <>
                        <tr>
                            {[...Array(5)].map((value,index)=><td style={{paddingTop: 10, paddingBottom: 10, textAlign: 'center', backgroundColor: 'rgb(29,124,237,0.2)'}}>{tableData[i*5+index]?.name}</td>)}                           
                        </tr>
                        <tr>
                            {[...Array(5)].map((value,index)=><td style={{paddingTop: 10, paddingBottom: 10, textAlign: 'center'}}>{tableData[i*5+index]?.value}</td>)}                           
                        </tr>
                    </>
                ))}
            </tbody>
            </table>
        ) 
    }
};

使用:

javascript 复制代码
<OneDimensionTable data={data}></OneDimensionTable>

(我所说的一维:表格都是二维的,数据在纵横两个方向上应当都有意义,但本需求数据只在一个方向上有意义,所以我直接叫它一维表格了)

相关推荐
摆烂为不摆烂4 分钟前
😁深入JS(六): 一文让你完全理解浏览器进程与线程
前端·javascript
qiyue774 分钟前
Cursor 深度使用指南(二) - 新能力使用教程
前端·ai编程·cursor
伟笑34 分钟前
React 的常用钩子函数在Vue中是如何设计体现出来的。
前端·react.js
Sapphire~1 小时前
重学前端003 --- CSS 颜色
前端·css
慧一居士1 小时前
CSS和CSS3区别对比
前端·css3
我血条子呢1 小时前
动态组件和插槽
前端·javascript·vue.js
中微子1 小时前
RESTful架构与前后端路由演进:构建现代化Web应用的核心规范
前端
前端付豪1 小时前
13、表格系统架构:列配置、嵌套数据、复杂交互
前端·javascript·架构
南屿im1 小时前
发布订阅模式和观察者模式傻傻分不清?一文搞懂两大设计模式
前端·javascript
I_have_a_lemon1 小时前
前端、产品、设计师神器推荐——Onlook
前端·cursor