| 饿了么element滚动条elScrollbar的使用（包含在el | 您所在的位置：网站首页 › elscrollbar横向滚动条 › 饿了么element滚动条elScrollbar的使用（包含在el |
饿了么element滚动条elScrollbar的使用（包含在el
|
饿了么element滚动条elScrollbar的使用（包含在el-table中的使用）
简介引用基本使用只显示横向滚动条只显示纵向滚动条在el-table中使用滚动条滚动条置底
简介
由于项目需要统一滚动条样式有需要兼容ie,之前有用过一款滚动条插件，但是有点儿卡，而且数据更新需要自己重置，又刚好在elment官网看到了饿了么自带的滚动条样式比较友好，就想把他扣下来，搜索之后原来element-ui有这个滚动条的组件，只是文档里面没有，经使用验证可以兼容到ie10，而且可以很好的DIY样式，更不用每次更新数据就需要重置什么的，目前体检最好用的一款滚动条插件。后面如果有更好的解决方案会持续更新。 elment组件地址： https://element.eleme.cn/#/zh-CN/component/installation 引用比较懒的可以直接安装全部 // 安装 npm install 'element-ui' --save引用element-ui // 引用 import ElementUI from "element-ui"; Vue.use(ElementUI, { size: "medium", // set element-ui default size });按需加载的同学可以只引用滚动条组件 // 引用 import ElScrollbar from "element-ui/lib/scrollbar"; Vue.use(ElScrollbar); 基本使用el-scrollbar默认是隐藏的，需要设置未默认显示，颜色，宽度可以自行DIY。 你好，同学！！！ //css设置默认显示滚动条 .el-scrollbar__bar { opacity: 1; }效果 效果 在el-table中使用这个滚动条现在我的方案是自己写一个表头，设置show-header为false把el-table的表头隐藏，表头对齐自己可以微调。 效果 组件 方法 selfScrollDown() { this.$refs['selfScrollbar'].wrap.scrollTop = this.$refs['myScrollbar'].wrap.scrollHeight; }调用 页面渲染结束时调用，或者自己加延时 updated: function() { this.selfScrollDown() }效果 |
【本文地址】
公司简介
联系我们