一、Table表格组件的使用

1、Table表格组件中的插槽使用

二、点击查看测试报告，跳转到测试报告详情页实现

1、新建Report.vue组件

<template><!-- 测试报告组件 --><div>测试报告组件{{$route.params.id}}</div></template><script></script><style scoped></style>

2、配置路由

路由参数动态匹配：path:'/user/:id'

3、查看报告按钮添加事件

跳转到测试报告页面

showReport(id){// 传递路径参数this.$router.push({name:"report",params:{id:id}})
}

三、页面布局

页面分为多个卡片

1、Layout布局

 <el-row><el-col :span="12"><div class="grid-content ep-bg-purple" /></el-col><el-col :span="12"><div class="grid-content ep-bg-purple-light" /></el-col></el-row>

2、卡片设计

<template><!-- 测试报告组件 --><!-- :gutter:设置卡片之间的距离 --><el-row :gutter="5" style="padding:1px"><el-col :span="12"><el-card style="margin-bottom:5px">测试报告组件{{$route.params.id}}</el-card><el-card style="margin-bottom:5px">测试报告组件{{$route.params.id}}</el-card><el-card style="margin-bottom:5px">测试报告组件{{$route.params.id}}</el-card><el-card style="margin-bottom:5px">测试报告组件{{$route.params.id}}</el-card><el-card style="margin-bottom:5px">测试报告组件{{$route.params.id}}</el-card></el-col><el-col :span="12"><el-card>{{reportInfo}}</el-card></el-col></el-row></template>

3、打开页面发送请求加载报告数据

获取执行记录

4、对接口进行封装

//  获取单条执行记录getRecordInfo(id){return http.get(`/records/${id}/`)
},
//  获取单个测试报告getReportInfo(id){return http.get(`/records/${id}/report/`)
}

页面展示结果如下

------------------------------------------

测试记录详情

测试报告详情