antd table 小tip

521 阅读2分钟

最近要做一个表格展示一些数据,本来以为是很简单的事情,我使用antd table 组件,他按照table组件的要求把数据源头返回给我即可(antd table 的数据源是按照表格的行来组数据的,也就是一个数组,数组里面每一条记录为表格的每一列的字段)但是跟我合作的后端同事非要反其道而行之,他给我的数据是按照表格的列来返回的,也就是数组中的每一条数据的每一个字段是表格每一列的每一行的字段值。拿到这样的数据,我瞬间明白这个需求没我想象的那么简单了,好在数据也是有规律的,对吧,他竖着给我,那我就自己处理成标准的数据源格式。我是这样写的:

 首先是确定表格的列,由于是竖着给的数据,他把每一列的title也通过一个字段返回给我了,所以,我就需要遍历这个结果数组,然后拿到所有保存title的字段的值,组成一个新数组,来生成表格的列;
 然后每一列的dataIndex 可以使用下标来重新生成; 例如 item0 item1 item2 item3 itme4....
 
接下来就是组装dataSource 了:

首先要明确的是,由于数据是竖着给的,所以,我们的列的数量肯定是等于接口数据的长度,而数据源的条数则是我们接口返回的数据中要显示的那几个属性的个数;

所以,首先将接口中需要取值的属性组成一个数组 properties;
然后,双层循环,第一层循环该属性数组 创建对象,并把对象push 到结果数组中,第二层循环遍历接口返回的数据数组,填充对象的每个属性;
代码如下:

let properties = ['a','b','c','d','e'];

properties.map((item,index)=>{
 const objItem = {};
 tableSource.map((data,idx))=>{
  objItem[`item${idx}`] = data[item];
  //外层循环循环一次,内层循环循环一遍,此行代码,假如外层index0 那么层行代码会生成tableSource 个数量个对象,且每个对象的item0属性等于 tablesource 每一条数据的当前遍历的属性,那么下一次循环同上
 }
 testArr.push(objItem); // testArr 为最终的结果
})