关于使用smart-admin开发后台管理系统遇到的问题之table表格滚动条出现空白间隙如何解决

背景描述：

使用 smart-admin 开发后台管理系统；
官方网址：https://gitee.com/lab1024/smart-admin
View Design网址：https://www.iviewui.com/view-ui-plus/component/form/table

在页面中使用 table组件后，操作流程如下： 
  1.给table一个固定高度，固定宽度；
  2.给操作栏fixed在左右侧都可
  ok,目前会看到界面是正常的，但是，大家都知道原生的滚动条样式有点点丑，一般情况都会去修改滚动条的样式对吧，
  so~问题就出现了...你就会看到图(2)效果
  finally，那么如何解决呢？，咱们接着往下看...

正常情况如图（1）：

遇到的问题(2)：

解决后效果如图(3)：

上代码：

<template>
  <div>
     <Table
      width="600"
      height="400"
      border
      :columns="columns"
      :data="tableData"
     >
      <template #action>
         <Button type="text" style="margin-right: 15px">编辑</Button>
         <Button type="text">删除</Button>
      </template>
     </Table>
  </div>
</template>
<script>
  export default {
    name: 'TableDemo',
    data(){
      return {
        columns: [
          ...,
         {
           title: '操作',
           key: 'action',
           fixed: 'right',
           slot: 'action',
           width: 160
         }
        ],
        tableData: []
      }
    }
  }
</script>
<style lang="less" scoped>
  // 重新设置 滚动条宽高样式
  .ivu-table-overflowY {
    &::-webkit-scrollbar {
      width: 8px; //这里的宽度可以根据实际情况来处理。不过，需要注意一点的就是，原生滚动条的宽度是17px。
      height: 8px; //这里的高度同上。
    }
    &::-webkit-scrollbar-thumb {
      border-radius: 5px;
      box-shadow: inset 0 0 5px rgb(185,185,185);
      -webkit-box-shadow: inset 0 0 5px rgb(185,185,185);
      background: #c7c5c8;
    }
    &::-webkit-scrollbar-track {
      box-shadow: inset 0 0 5px rgba(0,0,0,.2);
      border-radius: 5px;
      background: rgb(247,247,247);
    }
  }
  // 这里的样式代码重要
  .ivu-table-fixed-body{
    box-sizing: content-box;
    padding-bottom: 9px;  // 这里为什么是9px,而不是10px,抑或5px等等，原因在于，原生滚动条宽度是17px;我们给滚动条设置的宽度为8px;这个宽度差就是9px了。
  }
  // 这里的样式代码重要
  .ivu-table-fixed-right{
    right: 8px !important; // 原因同上，可设置为9px,但是从demo上看，设置8px效果会好看点，不会看到一条border线。还有一点，可能会出现样式穿透问题，那么可借助 /deep/ 来处理
  }
</style>