element-ui滚动条el-scrollbar置底方式 element-ui滚动条el-scrollbar置底方

element-ui滚动条el-scrollbar置底
element-ui表格滚动条样式el-scrollbar使用问题

问题如下图，原始表格滚动条很丑
想要的效果如下
操作步骤

element-ui滚动条el-scrollbar置底在需要滚动的地方加上

方法

scrollDown() {this.$refs['myScrollbar'].wrap.scrollTop = this.$refs['myScrollbar'].wrap.scrollHeight }

不能在接收数据时调用，需要在页面渲染结束时调用方法

updated: function() {this.scrollDown()}

element-ui表格滚动条样式el-scrollbar使用问题实现效果：

文章图片

问题如下图，原始表格滚动条很丑

文章图片

想要的效果如下

文章图片

操作步骤
1、template部分代码

2、script数据部分的代码

3、css样式部分代码

.ccc .box {width: 100%; height: 400px; border: 1px solid red; margin: 0 auto; white-space: nowrap; }.ccc .el-scrollbar {height: 100%; }.ccc .box2 {margin-top: 50px; height: 200px; overflow: overlay; }/* 最为关键得两个样式代码，可以设置全局滚动条样式，也可以按需设置 */.ccc ::-webkit-scrollbar {/* 设置竖向滚动条的宽度 */width: 5px; /* 设置横向滚动条的高度 */height: 5px; }.ccc ::-webkit-scrollbar-thumb {/*滚动条的背景色*/background-color: rgba(144,147,153,.3); border-radius: 35px; position: relative; }

【element-ui滚动条el-scrollbar置底方式】以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。