如何实现带Vue绑定的Bootstrap表格及开发显示异常排查

问题根源 #

表格显示异常的核心原因是违反了HTML表格的DOM结构规范：<tbody> 标签的合法直接子元素只能是 <tr> 行元素，你在 <tbody> 内嵌套 <div> 做条件判断和循环时，浏览器解析会自动将这些不符合规范的 <div> 移动到表格外部，直接打乱表格结构，导致Bootstrap的表格样式无法正常生效。

修复方案 #

将所有用于承载 v-if、v-for 指令的 <div> 替换为Vue的 <template> 占位标签即可。<template> 是Vue提供的无渲染虚拟容器，不会生成真实DOM节点，完全不会破坏原生表格的结构：

<table class="table table-bordered">
  <thead>
    <tr>
      <th scope="col">variant</th>
      <th scope="col">price</th>
      <th scope="col">quantity</th>
    </tr>
  </thead>
  <tbody>
    <template v-if="!is2">
      <template v-for="(variant, index) in options[0].variants" :key="index">
        <tr>
          <th scope="row"><input type="text" class="form-control" :value="variant.name" disabled> </th>
          <td><input type="text" class="form-control"></td>
          <td><input type="text" class="form-control"></td>
        </tr>
      </template>
    </template>
    <template v-if="is2">
      <template v-for="(variant1, index) in options[0].variants" :key="index">
        <template v-for="(variant2, vIndex) in options[1].variants" :key="vIndex">
          <tr>
            <th scope="row"><input type="text" class="form-control" :value="variant1.name +' / '+ variant2.name" disabled> </th>
            <td><input type="text" class="form-control"></td>
            <td><input type="text" class="form-control"></td>
          </tr>
        </template>
      </template>
    </template>
  </tbody>
</table>

内容的提问来源于stack exchange，提问作者Penny