在UI的布局开发中，样式是至关重要的，尤其是在开发大屏项目的时候，每个细节都需要处理到位，最常见的就是滚动条这块的样式，如果使用默认的滚动条样式，就明显的不协调，也影响到整体界面的美观。下面就给vue页面中的table表格加一个滚动条，并修改样式，为示例给大家提供一下此类问题的解决方案，这里只是用常见的table举例的，修改颜色和样式，可以灵活运用到其他场景。

HTML代码：

1
2
3
4
5
6
7
8
9
10
11
12
<table>
  <tr>
    <th>客户档位</th>
    <th>订足率</th>
  </tr>
  <tbody>
    <tr v-for="(item, index) in levelData" :key="index">
      <td>{{ item.khdw }}</td>
      <td>{{ item.dzl }}</td>
    </tr>
  </tbody>
</table>

注意：这里必须得有tbody这个标签，有的没有，我们得加上，当然在做其他布局的时候可以用class或元素标签也可以，接下来就是css样式的修改了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* 添加table滚动条 */
table {
  border-collapse: collapse;
  width: 100%;
}
tbody {
  display: block;
  overflow-x: hidden;
  overflow-y: auto;
  height: 220px;
}
thead,
tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
  word-break: break-all;
}

这里都比较简单，可以自行调试看看效果，主要是border-collapse: collapse;这个样式。
接下来就是设置滚动条样式的css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* 滚动条的样式，颜色自行调节 */
table tbody::-webkit-scrollbar {
  width: 6px;
}
table tbody::-webkit-scrollbar-thumb {
  background-color: rgba(79, 77, 80, 0.5);
  border-radius: 5px;
}
table tbody::-webkit-scrollbar-track {
  background-color: rgba(229, 229, 229, 0.5);
  border-radius: 5px;
}
table tbody::-webkit-scrollbar-thumb:hover {
  background-color: rgba(79, 77, 80, 0.7);
}
table tbody::-webkit-scrollbar-thumb:active {
  background-color: rgba(79, 77, 80, 0.9);
}

这个是将滚动条设置的比较细一点的，还有一些滚动条颜色之类的样式，可自行调试，展示一下最后的效果图：