如何制作包含 Vue 绑定的引导表？答案

【问题标题】：how to make bootstrap table including Vue Bindings?如何制作包含 Vue 绑定的引导表？
【发布时间】：2021-10-18 01:23:18
【问题描述】：

我正在开发一个 vue 项目，我正在使用引导程序进行样式设置。正如您在图片上看到的，表格看起来很奇怪：

https://i.stack.imgur.com/gRifL.png

我的代码：

<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>
                        <div v-if="!is2">
                            <div 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>
                            </div>
                        </div>
                        <div v-if="is2">
                            <div v-for="(variant1, index) in options[0].variants" :key="index">
                                <div 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>
                                </div>
                            </div>
                        </div>
                        </tbody>
                    </table>

【问题讨论】：

标签： twitter-bootstrap vue.js bootstrap-4

【解决方案1】：

因为您将divs 添加为破坏样式的tbody 元素的直接子元素，所以您可以使用虚拟元素template 来进行条件渲染和循环而不是div，例如：

 <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>

【讨论】：