自定义 element-ui 表格滚动条插件

前言

此文原发表于本人 CSDN，此文为 2019.08.07 最新迁移与修订。

elemtent-ui 是基于 vue2.0 开发的优秀的 前端 UI 组件库，它秉着 简洁，快速，效率的原则，大大的方便了网站开发人员，减少了开发人员大量的书写组件时间。

但是 element-ui 中的部分组件，并不能满足所有的开发（产品 ）需求，比如 element-ui 中的 表格组件(el-table)，其表格组件功能很强大，但是当表格超出定义宽度之后出现的横向滚动条（浏览器默认滚动条）会影响整体页面美观，如下图

可能这个滚动条 已经让不少前端同学（祭了天 ）头疼，但是相应的我们联想到 element-ui 也提供了一个隐藏的滚动条组件（滑稽 ），如下图

横向的官方文档上有个 bug 例子

可以看到，这边原生滚动条和 element-ui 提供的滚动条组件产生了冲突（原因等等会讲，略微提一下解决方案是修改样式）

需求&解决方案

某一天我接到了个需求，把表格横向滚动条（主要是横向），改成 el-scrollbar 样子的，于是我正常调用 el-scrollbar 对表格结构进行包裹，结果如下

结果如下

（于是我枯了 ）

很显然，这样子并不行，那我们找找原因，为什么不行。打开控制台，可以看出相应的 DOM 节点已经生成，所以必然是样式问题导致（为什么会有样式问题？等等解释）

我们选中横向滚动条，发现它的 opacity 是 0

为什么会没有？其实很简单，原因是内部 DOM 节点的宽度接近于 el-scrollbar 初始化计算出来的宽度，导致 el-scrollbar 这个组件认为宽度不需要显示，而当窗口变化以后，宽度计算就交给了浏览器。

可以看出这边表格的显示宽度只有 364，只要解决了这个问题，就可以显示出滚动条，那么有什么办法使表格就以实际宽度显示在 DOM 中？（超出部分自动 overflow:hidden）

翻看资料加上自己的理解，目前主要有 2 个解决方案

• 重新计算 el-table 的实际宽度，当前节点渲染计算等全都是交给了浏览器进行计算，我们只需要手动计算 el-table 的真实宽度并赋值给对应节点，那么 el-scrollbar 就会进行再次计算进而显示滚动条

• 使用 css3 width 的新属性 fit-content ，即宽度适应内容，具体内容可以移步 fit-content，不重复介绍。此属性目前在 IE 上未实现（估计将来也不会 ）

并且在以上解决方案时，必须将原生的滚动条取消，否则样式重叠会很难看

（.elTableBar 是父层样式选择器）

有了以上的解决方案，于是我就利用 el-scrollbar 组件进行二次封装，完成了现在的 el-table 滚动条插件（已经兼容各种浏览器，由于 IE 内核手动计算，对性能有一定影响）

安装&使用

安装方法

npm i el-table-bar-base

或者

yarn add el-table-bar-base

使用方法如下

import ElTableBar from 'el-table-bar-base'
import 'el-table-bar-base/lib/ElTableBar.css'

Vue.use(ElTableBar)

模板语法如下

效果图

同时 还支持 fixed 模式（此模式感谢 suchenglin2017 提出的 issue）

具体如下

即滚动条跟随屏幕

具体可以查看el-table-bar-base获得支持。

愉快的进行撸代码之旅吧！~