数组数据处理成表格可渲染的数据（按指定步长取对象的某一属性组成新的数组对象）

我们都知道，表格组件渲染的时侯，表格数据是数组对象形式的。

就像：[{},{},{},{}]
这样表格就可以渲染出4条数据。

渲染表格数据需要配置表格列：columns

表格列的格式也是数组对象形式的：[{},{},{}]。

---

举栗：

      const data= [
        {
          column1: '1-1',
          column2: '1-2',
          column3: '1-3',
        },
        {
          column1: '2-1',
          column2: '2-2',
          column3: '2-3',
        },
        {
          column1: '3-1',
          column2: '3-2',
          column3: '3-3',
        },
        {
          column1: '4-1',
          column2: '4-2',
          column3: '4-3',
        },
      ],

const columns = [
  {
    title: '列1',//列头显示文字：列标题--组成表头
    dataIndex: 'column1',//列数据在数据项中对应的 key：表格数据每条的字段--把对应字段的值渲染出来
    align: 'center',//居中显示
    width: 100,//每列的宽度
  },
  {
    title: '列2',
    dataIndex: 'column2',
    align: 'center',
    width: 100,
  },
  {
    title: '列3',
    dataIndex:'column3',
    align: 'center',
    width: 100,
  },
];

我相信，根据效果图就能看出列和表格数据的对应关系了。

---

我们常常会遇到这样的问题：

假设我们要渲染出上面的表格，返回的数据并不是上面定义的data那种格式的
而是数组长度为12的数组对象。
是的，就是把每个单元格作为一个结果返回。
更有复杂的是：

每条数据是这样的，返回很多，但我们可能只需要staffName这一个字段的值。
这时候我们就需要自己处理返回结果了。
对于数组按列单元格对象数据，我们要把它处理成数组按行对象数据。

解题思路

根据返回的数组的长度和表格的列数，就能知道我们需要多少行数据，也就是需要定义几个对象。
再根据行数，我们可以知道每隔几个取一次数据进行组合。

先处理成行数据

意思就是：

4行3列的表格要渲染出来，表格数据应该是[{},{},{},{}]
现在的返回结果是[{},{},{},{},{},{},{},{},{},{},{},{}]
且每四个为一列。

怎样处理：

对于返回结果，每隔4个取出来重新组合成对象，最终会得到一个长度为3的数组对象。

①在这里我们确切的知道应有的数组长度为4，所以可以直接定义4个空对象来存放需要组合的数据。

let obj1={};//存放第一行的数据
let obj2={};//存放第二行的数据
let obj3={};//存放第三行的数据
let obj4={};//存放第四行的数据
let data=[];//用来存放最终组合好的数据
//假设返回的数组数据为resultData
resultData.forEach((item,index)=>{
	//可以组成表格第一行的数据
	if(index%4==0){
		 this.$set(obj1, 字段（键）, 值);
	}
	//可以组成表格第二行的数据
	else if(index%4==1){
		 this.$set(obj2, 字段（键）, 值);
	}
	//可以组成表格第三行的数据
	else if(index%4==2){
		 this.$set(obj3, 字段（键）, 值);
	}
	//可以组成表格第一行的数据
	else if(index%4==3){
		 this.$set(obj4, 字段（键）, 值);
	}
)
this.$set(data, 0, obj1);
this.$set(data, 1, obj2);
this.$set(data, 2, obj3);
this.$set(data, 3, obj4);

②假如我们不知道具体的长度呢？
这其实是很普遍的现象，毕竟数据都是后端返回的，如果不打印出来，数据的长度我们并不可知。
这样我们就不能预先定义好对象来接收数据，毕竟我们不知道要定义多少个对象。

那很显然，我们又遇到一个棘手的问题：

动态生成对象

那就是在获取到后台返回的数据后，直接根据数组长度和表格列数得到表格行数，动态生成对象，接着处理数据。

let object={};
//动态生成5个空对象
for(let i=0;i<5;i++){
	let obj=`obj${i}`;
	object[obj]={}
}
console.log(object);
//{obj0:{},obj1:{},obj2:{},obj3:{},obj4:{}}

解决方案

动态生成对象的问题解决后，我们还要解决怎么简便实现隔一段取一个数据的问题。

如果是按固定长度取连续的数据，也就是数据切片，那倒是容易处理，slice方法一下就能处理好。
这种每隔固定长度也就是步长，取一个的问题，要解决的话还是需要点思考在里面的。

举栗：

//假设有这样一个数组
let data=[1,2,3,4,5,6,7,8,9,10,11,12]
//我们需要得到下面的几组数据
let a=[1,4,7,10];
let b=[2,5,8,11];
let c=[3,6,9,12];

简单分析一下：
处理的时候，我们需要原始数组吧：data
我们需要步长（隔取操作的位数）吧：step

处理方法

//数组数据处理方法
getArray(arr,step){
	//动态生成对象
	let array=[];//存放最终数组，用于返回
	let list=[];//存放动态生成的对象
	
	for(let i=0;i<step;i++){
		let obj=`obj${i}`;//声明对象名
		list[obj]={};//定义空对象
		//for循坏的第三个表达式是循环的控制条件，这样我们就可以用步长来处理数据了
		for(let j=i;j<arr.length;j+=step){
			list[obj][arr[j].字段名=字段值
		}
		//组合好的对象存进数组里
		array.push(list[obj])
	}
	//最终结果返回出去
	return array;	
},
//获取后台数据方法
getResult(){
	//调取接口获得数据，这里直接假设得到的数据存进data里面
	//事先我们一定是定义好表格的数据数组dataSource的值：resultData
	this.resultData=this.getArray(data,4);
	//注意：4就是步长，是根据data的长度和表格的列columns的长度得到的：data.length/columns.length
}

数据处理完成，表格可以正确的被渲染出来了。

这里是飞鱼爱吃米，只授渔，不授鱼！