性能场景:固定表头的地位不在浏览器顶端
办法一：
反对表中有合并单元格的状况下 兼容多个浏览器（包含ie）
实现逻辑通过定义两个table来实现
一个table只有thead
一个table只有tbody
> vue <div class="table-head"> <b-table-simple fixed bordered> <colgroup> <col style="width:11%;" /> <col style="width:19%;" /> <col style="width:6%;" /> <col style="width:7%;" /> </colgroup> <colgroup> <col style="width:8%;" /> <col style="width:8%;" /> <col style="width:9%;" /> <col style="width:8%;" /> <col style="width:8%;" /> <col style="width:8%;" /> <col style="width:8%;" /> </colgroup> <b-thead head-variant="dark" class="text-center"> <b-tr> <b-th rowspan="2">第一行表头1</b-th> <b-th rowspan="2">第一行表头2</b-th> <b-th rowspan="2">第一行表头3</b-th> <b-th rowspan="2">第一行表头4</b-th> <b-th colspan="7">第一行表头5</b-th> </b-tr> <b-tr> <b-th>第二行表头1</b-th> <b-th>第二行表头2</b-th> <b-th>第二行表头3</b-th> <b-th>第二行表头4</b-th> <b-th>第二行表头5</b-th> <b-th>第二行表头6</b-th> <b-th>第二行表头7</b-th> </b-tr> </b-thead> </b-table-simple> </div> <div class="table-body"> <b-table-simple fixed striped bordered> <colgroup> <col style="width:11%;" /> <col style="width:19%;" /> <col style="width:6%;" /> <col style="width:7%;" /> </colgroup> <colgroup> <col style="width:8%;" /> <col style="width:8%;" /> <col style="width:9%;" /> <col style="width:8%;" /> <col style="width:8%;" /> <col style="width:8%;" /> <col style="width:8%;" /> </colgroup> <b-tbody> <template v-for="(item,i) in items"> <b-tr :key="i + 'odd'"> <b-td rowspan="2" style="height:58px;">内容1</b-td> <b-td style="height:29px;">内容2</b-td> <b-td class="text-center" style="height:29px;">内容3</b-td> <b-td class="text-right" style="height:29px;">内容4</b-td> <b-td class="text-right" style="height:29px;">内容5</b-td> <b-td class="text-right" style="height:29px;">内容6</b-td> <b-td class="text-right" style="height:29px;background-color:#FFEBD9;"> 内容7 </b-td> <b-td class="text-right" style="height:29px;">内容8</b-td> <b-td class="text-right" style="height:29px;">内容9</b-td> <b-td class="text-right" style="height:29px;">内容10</b-td> <b-td class="text-right" style="height:29px;">内容11</b-td> </b-tr> <b-tr :key="i + 'even'"> <b-td style="height:29px;">内容12</b-td> <b-td class="text-center" style="height:29px;">内容13</b-td> <b-td class="text-right" style="height:29px;">内容14</b-td> <b-td class="text-right" style="height:29px;">内容15</b-td> <b-td class="text-right" style="height:29px;">内容16</b-td> <b-td class="text-right" style="height:29px;background-color:#FFEBD9;"> <b>内容17</b> </b-td> <b-td class="text-right" style="height:29px;">内容18</b-td> <b-td class="text-right" style="height:29px;">内容19</b-td> <b-td class="text-right" style="height:29px;">内容20</b-td> <b-td class="text-right" style="height:29px;">内容21</b-td> </b-tr> </template> </b-tbody> </b-table-simple> </div>> css .table-head { .table-bordered { border-bottom-width: 2px; } } .table-body { margin-top: -17px; @media (min-width: 768px) { max-height: 650px; } @media (min-width: 1024px) { max-height: 350px; } &::-webkit-scrollbar { display: none; } -ms-overflow-style: none; overflow-y: auto; .table-bordered { border-top-width: 0px; } }通过标签<colgroup>能够调整单元格的大小
办法二：
更新中