vue使用原生table动态合并行

最新推荐文章于 2024-06-26 15:41:00 发布

原创最新推荐文章于 2024-06-26 15:41:00 发布

· 1k 阅读

5 ·

版权

文章标签：

#vue.js #前端 #javascript

日常bug总结专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个使用Vue.js实现的问题及解决方案展示表格。表格详细列举了常见问题如终端无法启动、屏幕不显示等，并提供了相应的解决步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>

效果图

在这里插入图片描述