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

[vue,elementUI]多级表头展示

时间:2023-04-01 02:18:12 vue.js

输入索引和输出索引作为一级表头,输入索引和输出索引的每个小项作为二级表头。二级表头是动态生成的。效果图如下:返回数据说明:array-->object->object,第二个object中的每个属性都是二级表头的属性名和值,格式如下:[{"executionDetailId":"945f4744-bde9-4c84-9f29-b6b3a18c7b18","executionId":"90a7fe92-370a-49f5-a836-816f6048c002","subjectId":"joys-01","subjectCode":"joys-01",“subjectName”:“公司01”,“execTimestamp”:“2021-07-22T09:08:56.000+00:00”,“状态”:“成功”,“creationTs”:“2021-07-2217:08:56","creatorId":"8c0e93bb-db21-4480-8d28-bf91cbff2003","tenantId":"74a03e75-c696-4ba6-a4c8-30e0ce48f526","subjectProps":{},"inputIndicatorSet":{"Number近1个月企业动产融资记录数":1,"近6个月企业投资者股权变动记录数":3},"outputIndicatorSet":{"操作异常":20},"errorMessage“:空},{“executionDetailId”:“b8fe23d0-f640-4661-9063-987b2e49fe22”,“executionId”:“90a7fe92-370a-49f5-a836-816f6048c002","subjectId":"joys-02","subjectCode":"joys-02","subjectName":"company02","execTimestamp":"2021-07-22T09:08:56.000+00:00","status":"FAILED","creationTs":"2021-07-2217:08:56","creatorId":"8c0e93bb-db21-4480-8d28-bf91cbff2003","tenantId":"74a03e75-c696-4ba6-a4c8-30e0ce48f526","subjectProps":{},"inputIndicatorSet":{"近1个月企业动产融资记录数":4,"近6个月企业投资者股权变动记录数":2},"outputIndicatorSet":{"操作异常":20},"errorMessage":null},{"executionDetailId":"f5d144de-1792-451e-aa58-c6897e8e9301","executionId":"90a7fe92-370a-49f5-a836-816f6048c002","subjectId":"joys-03","subjectCode":"joys-03","subjectName":"company03","execTimestamp":"2021-07-22T09:08:56.000+00:00","status":"SUCCEEDED","creationTs":"2021-07-2217:08:56","creatorId":"8c0e93bb-db21-4480-8d28-bf91cbff2003","tenantId":"74a03e75-c696-4ba6-a4c8-30e0ce48f526","subjectProps":{},"inputIndicatorSet":{"近一个月企业动产融资记录数":3、“法人投资者近6个月股权变动记录条数”:4条},“outputIndicatorSet”:{“操作异常”:20条},“errorMessage”:null}]生成二级表头:在当前的业务场景中,每条数据的inputIndicatorSet和outputIndicatorSet都是一样的,所以我们定义两个变量,取出第一个对象的属性:inputIndicatorSet和outputIndicatorSet,代码如下:this.executionDetail=resp.dataif(this.executionDetail&&this.executionDetail.length>0){this.inputIndicatorSet=this.executionDetail[0].inputIndicatorSetthis.outputIndicatorSet=this.executionDetail[0].outputIndicatorSet}生成一个二级头和值:{{scope.row.inputIndicatorSet[key]}}:data="executionDetail"为后台返回的数据;inputIndicatorSet是一个json对象,所以直接使用inputIndicatorSet[key]获取值;slot-scope="scope"指的是当前行。<结束>

最新推荐
猜你喜欢