1.vue部分
<table
class="mb-5"
border="1"
cellspaing="0"
align="center"
width="85%"
>
<thead>
<tr>
<th
class="tabHeader"
v-for="(i, num) in tabHeader"
:key="num + 2"
>
{{ i.label }}
</th>
</tr>
</thead>
<tbody>
<template v-for="i in tabContent">
<template v-for="(g, _index) in i.content">
<tr :key="_index + i.name">
<td
v-if="_index == 0"
class="colHead"
:rowspan="i.content.length"
>
{{ i.name }}
</td>
<td :key="_index + 'right'">
{{ g }}
</td>
</tr>
</template>
</template>
</tbody>
</table>
js部分
<script>
export default {
data() {
return {
tabHeader: [{
key: "name",
label: "出现的问题",
},
{
key: "content",
label: "可能的解决方案",
},
],
tabContent: [{
name: "1、终端无法启动",
content: [
"·确保电池安装正确",
"·更换带有充足电量的电池",
"·取下电池后重新安装电池",
"·设备复位",
"·重新启动设备",
],
},
{
name: "2、屏幕不显示",
content: [
"·重新启动设备",
"·确认设备是否处于休眠状态",
"·重新启动设备",
"·更换带有充足电量的电池",
],
},
{
name: "3、键盘无法响应",
content: [
"·确认设备是否处于休眠状态",
"·重新启动设备",
"·更换带有充足电量的电池",
],
},
{
name: "4、SD卡无法识别",
content: [
"·确认SD卡是否插反",
"·确认SD卡是否插牢",
"·确认SD卡是否损坏",
"·重新启动设备",
"·更换带有充足电量的电池",
],
},
{
name: "5、电池无法充电",
content: [
"·确认AC适配器是否损坏",
"·确认AC适配器是否已接入市电",
"·确认AC适配器是否插牢",
],
},
],
};
},
}
</script>