js将已有数组重新分组(将数组每10项分成一组)

时间:2020-02-26 杰哥斯坦森人气:8

项目中碰到的一个小需求：分页请求数据，一次请求60条，需要将后台返回的数组每10条分成一组渲染一个表格（表格使用的是ant-design-vue的table）


实现逻辑：
var chunk = 10;
var len = res.data.content.length;
var result = [];
for (let i = 10; i < len; i += chunk) {
  result.push(res.data.content.slice(i, i + chunk)) // 每10项分成一组        
}

result = result.map((item, index) => { //遍历，每组加上表头和data

return {

columns: [{

title: '列号',

dataIndex: 'index',

align: 'center',

width: 60

{

title: '特征',

dataIndex: 'field',

align: 'center',

width: 110

{

title: '分类',

dataIndex: 'type',

align: 'center',

width: 110

}],

data: item

}

})

this.tableData = result

//表格渲染部分

<a-table

v-for="(item,index) in configTableData"

:key="index"

:columns="item.columns"

:dataSource="item.data"

bordered

:rowKey="record=>record.id"

组{{index+1}}

</template>

</a-table>

加载全部内容