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>

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

相关推荐
遂心_5 分钟前
为什么 '1'.toString() 可以调用?深入理解 JavaScript 包装对象机制
前端·javascript
IT_陈寒6 分钟前
JavaScript 性能优化:5 个被低估的 V8 引擎技巧让你的代码快 200%
前端·人工智能·后端
岛风风28 分钟前
关于手机的设备信息
前端
ReturnTrue86840 分钟前
nginx性能优化之Gzip
前端
w_y_fan1 小时前
Flutter 滚动组件总结
前端·flutter
wuli金居哇1 小时前
我用 Turborepo 搭了个 Monorepo 脚手架,开发体验直接起飞!
前端
Asort1 小时前
JavaScript 从零开始(五):运算符和表达式——从零开始掌握算术、比较与逻辑运算
前端·javascript
一枚前端小能手2 小时前
🚀 缓存用错了网站更慢?前端缓存策略的5个致命误区
前端·javascript
艾小码2 小时前
为什么你的页面会闪烁?useLayoutEffect和useEffect的区别藏在这里!
前端·javascript·react.js
艾小码2 小时前
告别Vue混入的坑!Composition API让我效率翻倍的3个秘密
前端·javascript·vue.js