当前位置: 首页 > Web前端 > vue.js

Day25-100前端表头和列表内容是动态生成的

时间:2023-03-31 21:15:14 vue.js

1。需要表头和列表数据,根据接口返回的数据动态生成列表。2、分析1)动态生成表头中间表头采用子组件的形式,根据返回的数据动态拼接生成列表的表头。左右拼接header,生成一个大的header对象。2)要动态生成表头和对应的列表内容数据,需要添加which表头的列表项。3.部分代码1)页面组件0":tableColumn="columns":tableData="categorySum":pagination="pagination"@changePage="handleTableChange">2)导入子组件importvTablefrom'../common/Table'3)拼接列表头和内容this.linkHeaders.push({title:value.stageName+'/张(box)',children:[{title:'未收到',dataIndex:'stageList['+index+'].pendingImageCount'},{title:'进行中',dataIndex:'stageList['+index+'].doingImageCount'},{title:'finishedDone',dataIndex:'stageList['+index+'].doneImageObjectCount'}]})this.columns=this.categoryHeaders.concat(this.linkHeaders).concat(this.pmHeaders)4)这里会涉及子组件代码调用父组件的内容传递给子组件。以上