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

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

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个解决方案
1.重新计算el-table的实际宽度，当前节点渲染计算等全都是交给了浏览器进行计算，我们只需要手动计算el-table的真实宽度并赋值给对应节点，那么el-scrollbar 就会进行再次计算进而显示滚动条
2.使用css3 width的新属性 fit-content ，即宽度适应内容，具体内容可以移步CSDN其他文章搜索即可，不重复介绍。此属性目前在IE上未实现（估计将来也不会 ）

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

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

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

安装方法

npm i el-table-bar-base

或者

yarn add el-table-bar-base

使用方法如下

模板语法如下

效果图

同时 还支持fixed模式

具体如下

即滚动条跟随屏幕~~~
具体可以查看
https://github.com/JdesHZ/el-table-bar-base
获得支持。

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

严禁私自转载，如有需求，请联系