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

0\ 效果展示

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.youkuaiyun.com/zyy_0725/article/details/80436258