Commit 4b77a377 authored by 盖献康's avatar 盖献康

feat: 确认审查结果-横向树状表格

parent 384437ba
......@@ -3,30 +3,54 @@
<el-card>
<div slot="header" class="clearfix">
<span>企业留档文件(所属任务:广汽丰田体系审查)</span>
<el-button icon="el-icon-back" class="back-btn" type="text">
<el-button
icon="el-icon-back"
class="back-btn"
type="text"
@click="handleBack"
>
返回
</el-button>
<el-button class="back-btn" icon="el-icon-download">下载文件</el-button>
<el-button class="back-btn" icon="el-icon-refresh">重新生成</el-button>
<el-button class="back-btn" icon="el-icon-download" type="primary">
下载文件
</el-button>
<el-button class="back-btn" icon="el-icon-refresh" type="primary">
重新生成
</el-button>
</div>
<!-- table部分 -->
<el-table
v-if="spanMethod.length"
ref="table"
:data="testTableArr"
:span-method="arraySpanMethod"
class="ele-table table-info-area"
border
stripe
>
<el-table-column
v-for="(item, index) in tableTitleKey"
:key="index"
:prop="item"
:label="tableTitle[item].name + info[tableTitle[item].type]"
align="center"
></el-table-column>
</el-table>
<table border="1">
<thead>
<tr>
<th class="one-column" rowspan="2">文件名称</th>
<th class="two-column">文件目录</th>
<th class="three-column">标准章节</th>
<th class="four-column">标准要求</th>
<th class="five-column">审查要点</th>
</tr>
</thead>
<tbody>
<tr>
<td class="one-column" rowspan="2">文件</td>
<td class="two-column">1.1-1.5</td>
<td class="three-column">5.1</td>
<td class="four-column">
车辆制造商应具备车辆全生命周期的汽车信息安全管理体系
</td>
<td class="five-column">车辆制造商是否建立汽车信息安全管理体系</td>
</tr>
<tr>
<td class="two-column">1.6</td>
<td class="three-column">5.1</td>
<td class="four-column">
车辆制造商应具备车辆全生命周期的汽车信息安全管理体系
</td>
<td class="five-column">
车辆制造商是否针对正式发布的汽车信息安全管理体系进行了试运行
</td>
</tr>
</tbody>
</table>
</el-card>
</div>
</template>
......@@ -34,19 +58,11 @@
<script>
export default {
data() {
return {
info: {
string: '',
avg: '(平均值)',
sum: '(总数)'
},
testTableArr: [], // table数据
spanKey: [], // 需要合并的列,每个元素为表格的prop值(键值)
tableTitle: {}, // table表头显示
tableTitleKey: [], // 所有的列的prop值(键值)
spanMethod: [], // 表格向下合并的方式
divArr: [], // 分片数据,用于将数据分片,保证不会
divIndex: [0] // 用于记录分片的位置
return {}
},
methods: {
handleBack() {
this.$router.go(-1)
}
}
}
......@@ -59,4 +75,31 @@ export default {
float: right;
}
}
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
border: 1px solid black;
padding: 8px;
text-align: left;
width: 300px;
}
.five-column {
width: 350px;
}
.four-column {
width: 350px;
}
.three-column {
width: 300px;
}
.two-column {
width: 150px;
}
.one-column {
width: 200px;
}
</style>
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment