关于Vue.cli 脚手架环境中引入Bootstrap时,table表格样式缺失的解决办法

Vue+bootstrap不能正常使用table的样式

 

 

 

 

环境：下载官网的本地bootstrap包，然后在vue 的index.html引入bootstrap的css和js环境

 

问题描述：1. vue里面引用bootstrap 的时候，table 的其他样式（table-border、table-hover等）不生效

代码:

 1  <table class='table table-striped'>
 2         <caption>学生管理系统v1.0-展示学生</caption>
 3           <tr>
 4             <th>姓名</th>
 5             <th>年龄</th>
 6             <th>性别</th>
 7             <th>操作</th>
 8           </tr>
 9           <tr v-for='item,index in arr' :key='index'>
10             <td>{{item.name}}</td>
11             <td>{{item.age}}</td>
12             <td>{{item.gender}}</td>
13             <td>
14               <button class='btn btn-danger btn-xs' data-toggle='modal' data-target='#exampleModal' data-whatever='@mdo' @click='del(index)'>删除</button>
15             </td>
16           </tr>
17       </table>

 

解决办法：在table里面，用tbody标签再套一层，如果有  caption标签 ，把caption标签放到 tbody 上面即可解决问题，因为caption标签必须紧贴着tbody标签（如下所示）

 

代码：

 1  <table class='table table-striped'>
 2         <caption>学生管理系统v1.0-展示学生</caption>
 3         <tbody>
 4           <tr>
 5             <th>姓名</th>
 6             <th>年龄</th>
 7             <th>性别</th>
 8             <th>操作</th>
 9           </tr>
10           <tr v-for='item,index in arr' :key='index'>
11             <td>{{item.name}}</td>
12             <td>{{item.age}}</td>
13             <td>{{item.gender}}</td>
14             <td>
15               <button class='btn btn-danger btn-xs' data-toggle='modal' data-target='#exampleModal' data-whatever='@mdo' @click='del(index)'>删除</button>
16             </td>
17           </tr>
18         </tbody>
19       </table>

 

 
posted @ 2022-03-02 17:39  Laoevils  阅读(546)  评论(0)    收藏  举报