Antd 表格合并与赋值渲染

官方文档合并列/行有一个关键属性 rowSpan和colSpan

如图:


render 中有一个默认renderCOntent函数,包含三个参数  value,row,index  一般我们想合并几行列 通过判定index==?来设置 colSpan /rowSpan的值为0  就能成功合并(renderCOntent函数是默认格式,不建议大改)

情景:

后端给了一个多维数组,首先要做的是遍历数组,push到新数组里。原因是方便 antd表格数据渲染


获取新数组

拿到新数组后,开始合并表格列


别忘了 return !

特别提醒:新数组中的参数名要和表格中的dataIndex 一致!

做到这一步数据基本能渲染出来,如果还想对数据进行填写累加操作,那么需要植入Input组件  使用onBlur函数方法

特别提醒:4.0版本onBlur 时不再修改选中值,且返回 React 原生的 event 对象  我用的是3.16版本!


函数内部

通过传入的values(row是形参)  进行判定,不为undefined时则转化为Number类型(input的值都是string,转化后方便计算value值和fraction值)


注:dataSource是state中定义的数组,方便数据存取

slice() 方法可从已有的数组中返回选定的元素。

reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。

注意: reduce() 对于空数组是不会执行回调函数的。


最后获取的newData就是得到的累加总值。  

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容