工作总结之记录如何使用组件Table的合并功能
作者:互联网
哎呀,忙了好几天,终于抽个空来总结一下啦~
第一次使用Table组件的合并单元格功能,由于之前的无知,居然使用原始代码写,简直费时费力。
这次花费了两天时间,算是总结出了使用方法吧。
功能,表头不固定,固定的是三个不同的阶段和前面几个展示列
Table中有一个功能是getCellProps,里面的参数有rowIndex, colIndex, record,lock
rowIndex表示的是每一行,colIndex表示的是每一列,record就是每条数据啦,lock参数没用到。
对于我的难点来说我的表格式不固定的,我不知道有几行数据需要合并,也不知道从那一列开始合并。
所以只能通过数据来统计。唯一庆幸的是数据中阶段是固定的,因此我可以统计每个阶段中需要合并的列,
第一个阶段我是可以确定的,然后后面的每个阶段只需要将前面阶段的数据相加就可以得到每列开始合并的列数是多少了。
然后就是项目了,项目我也可以通过数据统计来将每个项目需要合并的数据统计并push到每条数据中。由于不知道开始的列是哪一个,我是通过将每个项目都进行了合并,只需要将判断条件设为
if(rowIndex===rowIndex && conIndex===1)即可。colIndex需要根据具体情况来看, 我的正好在第二列。
啰啰嗦嗦也不知道自己在讲什么,自己知道就行啦~
原始数据格式:疯狂吐槽对接的后端,简直不要太坑啊,返回的数据不知道处理直接给前端,我需要什么数据还要和他说,还不一定理解,还是正式员工呢,心情不美丽。
reinsuranceInfo: { 1: [ { "id":1, "gmtCreate":null, "gmtModified":null, "operator":null, "levelId":3, "title":"重保准备工作任务", "stage":1, "workingMode":1, "deleteStatus":1, "stepConfigList":[{name: '倩倩' } ], "fmResult":null, "fmInfo":null } ], 2: [ { "id":2, "gmtCreate":null, "gmtModified":null, "operator":null, "levelId":3, "title":"重保准备工作任务", "stage":1, "workingMode":1, "deleteStatus":1, "stepConfigList":[{name: '倩倩' } ], "fmResult":null, "fmInfo":null } ], 3: [ { "id":3, "gmtCreate":null, "gmtModified":null, "operator":null, "levelId":3, "title":"重保准备工作任务", "stage":1, "workingMode":1, "deleteStatus":1, "stepConfigList":[{name: '倩倩' } ], "fmResult":null, "fmInfo":null } ], }
当然这个数据是需要处理的,这里就不说了~
看效果:做出来就有成就感了,加油吧~小胖子
PS: 希望明天的基金不要让我太失望,希望今天晚上可以睡个好觉。
标签:总结,colIndex,name,合并,组件,Table,gmtModified,null,数据 来源: https://www.cnblogs.com/judyhuayu/p/15325453.html