1、需求
Table表格的表头，以及列表数据根据接口返回的数据动态生成列表。
2、分析
1）动态生成表头
- 中间的表头使用子组件的形式，根据返回来的数据，动态拼接生成列表的表头。
- 将左右两边的表头拼接生成一个大的表头对象。
3、部分代码
1）页面组件
2） 导入子组件
import vTable from '../common/Table'3）拼接列表头及内容
this.linkHeaders.push({
title: value.stageName + '/张(框)',
children: [
{
title: '未领取',
dataIndex: 'stageList[' + index + '].pendingImageCount'
},
{
title: '进行中',
dataIndex: 'stageList[' + index + '].doingImageCount'
},
{
title: '已完成',
dataIndex: 'stageList[' + index + '].doneImageObjectCount'
}
]
})
this.columns = this.categoryHeaders.concat(this.linkHeaders).concat(this.pmHeaders)4） 子组件代码 这里会涉及到子组件调用父组件的内容。
record.id"
:data-source="tableData"
:pagination="curPagination"
:bordered="true"
size="small"
@change="handleTableChange"
>【Day 25/100 前端Table 表头及列表内容动态生成】以上
