在 vue-cli 项目中渲染表格使 thead 固定, tbody出现滚动条并优化

1\ 问题分析

• 当数据较多时，页面整体会因为高度超出，出现浏览器默认的滚动条，表头随之滚动，不便于查看。
• 使表头固定，不让浏览器出现滚动条，只在表体数据出现滚动条，而默认滚动条样式太丑，需要优化。

2\ 解决方案

首先构建页面基础布局，实现基本功能
然后进行页面优化

表头固定

此处所用的代码都是根据上图的页面设计来的，不必拘泥于此，可以根据实际情况调整。
主要目的是实现表头固定和滚动条优化

<!-- 列表展示 -->
<template>
<div class="table-wrapper">
<div class="table-head">
<table>
<colgroup>
<col style="width:70px" />
<col />
<col />
<col />
<col />
<col />
<col />
<col />
</colgroup>
<thead>
<tr>
<td>序号</td>
<td>时间</td>
<td>货1</td>
<td>货2</td>
<td>货3</td>
<td>货4</td>
<td>货5</td>
<td>货6</td>
</tr>
</thead>
</table>
</div>
<div class="table-body">
<table>
<colgroup>
<col style="width:70px" />
<col />
<col />
<col />
<col />
<col />
<col />
<col />
</colgroup>
<tbody>
<tr v-for="(item,index) in pqListData" :key="index">
<td>{{index+1}}</td>
<td>{{item.time}}</td>
<td>{{item.huo1number}}</td>
<td>{{item.huo2number}}</td>
<td>{{item.huo3number}}</td>
<td>{{item.huo4number}}</td>
<td>{{item.huo5number}}</td>
<td>{{item.huo6number}}</td>
</tr>
<tr v-if="pqListData == ''">
<td colspan="8" style="text-align: center">暂无数据</td>
</tr>
</tbody>
</table>
</div>
</div>
</template>

<style lang="less" scoped>
.table-wrapper {
height: calc(100% - 50px);  //可视区高度-查询栏高度=表格整体可用高度，保证浏览器不出现滚动条
table {
width: 100%;
table-layout: fixed; // 使表头固定的必须属性设置
td {
height: 40px;
line-height: 40px;
padding: 0;
text-align: center;
color: #fff;
border: 1px solid #35406d;
}
}
.table-head {
td {
color: #fff;
height: 37px;
line-height: 36px;
border: 1px solid #35406d;
background: #283970;
}
}
.table-body {
position: relative;
height: calc(100% - 42px);   // 表体出现滚动条的可用高度
overflow-y: auto;
table {
tbody tr:first-child td {
border-top: none;
}
tbody tr:hover {
box-shadow: 0 0 20px #49afff inset;
}
tr:nth-of-type(odd) {
background-color: #0b163a;
}
tr:nth-of-type(even) {
background-color: #142048;
}
}
}
}
</style>

滚动条优化

使用了基于 jQuery 的 nicescroll 插件

// 在项目目录 public/index.html 引入
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery.nicescroll/3.6.5/jquery.nicescroll.min.js"></script>

// 在对应页面中使用
<script>
export default {
mounted() {
$(".table-body")
.getNiceScroll()
.hide();
$(".table-body").niceScroll({
cursorwidth: "8px",
autohidemode: "leave",
cursorborder: "none",
cursorcolor: "rgba(36,155,249,0.4)",
preservenativescrolling: false
});
$(".table-body")
.getNiceScroll()
.resize();
}
};
</script>

占据文档流宽度的滚动条优化

直接使用 css 的相关属性

<style lang="less" scoped>
.table-body::-webkit-scrollbar {
/*滚动条整体样式*/
width: 10px;  /* 会占据10px的宽度，如果设置为0，则看不到滚动条样式，但不影响滚动效果 */
}
.table-body::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
border-radius: 9px;
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: rgba(0, 0, 0, 0.2);
}
.table-body::-webkit-scrollbar-track {
/*滚动条里面轨道*/
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
border-radius: 9px;
background: rgba(0, 0, 0, 0.1);
padding: 4px;
}
</style>

备注：
具体使用哪种优化效果，依具体需求而定。

niceScroll 的其他属性和详细用法，参考
原文链接：https://blog.csdn.net/zyy_0725/article/details/80436258

• 点赞
• 收藏
• 分享
• 文章举报