前言

之前在做项目的时候，突然发现el-table在使用的过程中遇到了一些问题，在整常情况下如果列表元素过长那么就会显示一个横向的滚动条，但是我的滚动条莫名其妙的消失了，最后解决了，所以记录一些解决的方式。

是由于样式的问题🛰🛰

我苦苦思索，发现肯定不可能是代码逻辑的问题，又去查找官方文档看看是否提供了相关的API我没有使用，发现官方也并没有提供这方面的内容，于是我便开始在网上查找有没有和我遇到相似情况的人，最终我找了解决的方法，下次如果遇到了可与再次试一试

  ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
      // width: 20px; /* 纵向滚动条 */
      height: 8px; /* 横向滚动条 必写 */
    }
    /* 设置滚动条样式 */
    ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
       设置滚动条哑颜色，根据自己选择设置
      // background-color: #dde;
      border-radius: 3px;
    }

这个样式通过::v-deep来深度的修改el-table中的样式，其中width修改的是纵向滚动条的宽度，而height修改的则是横向滚动条的高度。

通过这行代码修改之后滚动条就莫名奇妙的显示了出来，当然大家也可以根据选择是否要修改滚动条的颜色。有时候就是这样，一个bug能改半天，但是突然可能就一行代码就解决了问题。

优化使用😦😦

在解决了这个问题之后我发现还是不完美，因为我这个列表的高度宽度有限，所以我要使用横向的滚动条的时候还要翻到最底层来及逆行拖动，这无疑是极不方便的，我现在是50条数据，如果后期数据增加到100条，200条呢，因此这肯定不是长久之计，我于是有了一个想法，有没有一个方法，能够让横向的滚动条始终显示在可视的区域，以方便不拖动来查看表格中的数据，上网查找之后果然找到了满意的答案。

使用插件

我发现一个大神开发了一个插件，解决了这个问题（之后有机会我也搞一个）

npm install el-table-horizontal-scroll

通过这一行命令成功将插件安装到本地

但是在使用的时候发现作者写的很好，但是样式对于我来说还是有一点不是很满意，比如说滚动条的高度调小，颜色有些偏暗，不是很明显，这样势必会影响使用的效果，于是我打开调试器找到滚动条的样式对着控制台来进行修改

::v-deep .el-scrollbar__thumb {
      background-color: skyblue;
      background-image: -webkit-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.2) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0.2) 75%,
        transparent 75%,
        transparent
      );
    }
    ::v-deep .is-horizontal {
      width: 98%;
      background: #ededed;
      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      height: 10px !important;
    }

通过这些代码成功的修改了底部滚动条的样式

修改之后的滚动条样式更加好看并且高度合适，在拖动的时候也更加的方便，同时修改的样式也比较的美观。

对这个样式的一点理解：

其实这部分颜色也是在网上借鉴他人并且在自己学习之后来写出来的，渐变色我使用的不多，这次正好使用一下:

首先设置背景颜色为skyblue,其实渐变色就是将颜色分成了几个部分，然后然后让每个部分显示不同的颜色,做成这种螺旋状,比如这里这段代码定义了一个渐变背景，从左上角到右下角形成一个 45 度角的线性渐变,

在 CSS 中，background-image 属性不仅可以用于设置图像，还可以用于设置渐变效果。渐变背景可以是线性渐变（如本例中所示），也可以是径向渐变或其他类型的渐变。

使用 background-image 属性创建渐变背景时，需要使用特定的语法来指定渐变类型和颜色阶段。在这个例子中，使用了 -webkit-linear-gradient 函数来定义一个线性渐变。

然后使用颜色和透明属性进行交替配合来实现如图的一种效果

.is-horizontal这个样式主要是对滚动条的高度宽度进行设置,并且可以设置滚动条底部的颜色,

::v-deep的认知

当我们需要覆盖组件库中的样式时大多数情况只能通过深度作用选择器，::v-deep就是其中一种深度作用选择器。

而这种比较适合在Vue3项目中使用,所以我们在网上下载一个插件工具或者是使用组件库中的代码如果对样式不满意我们就可以使用这种方式来修改样式,

总结🍖🍖

本篇文章主要是解决了我们在实际使用el-table的时候横向的滚动条无法显示等一些问题,并且优化用户的体验,使滚动条保持显示在可视的区域,方便用户的使用,因此我们在项目的开发中应该要善于总结问题,这样下次在遇到就可以查看之前所写的笔记来修改.