项目平台之测试报告编码实现(七)
一、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/`)
}
页面展示结果如下