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