个人网站注册名称,口碑好的五屏网站建设,产品网页的制作,消防做设计有什么网站UI画的需求很抽象#xff0c;直接把数据铺开#xff0c;不能直接用antd组件了 上一行是name#xff0c;下一行是value#xff0c;总数不定#xff0c;最后前端还要显示求和
class OneDimensionTable extends React.Component { render() {const { data } this.props;le…UI画的需求很抽象直接把数据铺开不能直接用antd组件了 上一行是name下一行是value总数不定最后前端还要显示求和
class OneDimensionTable extends React.Component { render() {const { data } this.props;let total 0;data.map(item totalitem.value);const tableData [...data, {name: 合计, value: total}];const row Math.trunc(tableData.length % 5 0 ? tableData.length/5 : tableData.length/51); //一行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*5index]?.name}/td)} /trtr{[...Array(5)].map((value,index)td style{{paddingTop: 10, paddingBottom: 10, textAlign: center}}{tableData[i*5index]?.value}/td)} /tr/))}/tbody/table) }
};
使用
OneDimensionTable data{data}/OneDimensionTable
我所说的一维表格都是二维的数据在纵横两个方向上应当都有意义但本需求数据只在一个方向上有意义所以我直接叫它一维表格了
