客户说,我们这数据太多了,每次想看后面几列的数据都需要将页面的滚动条拉到最底部,能不能将滚动条固定在最底下。我说研究一下,看看怎么实现好,老板不开心了,这种简单的东西,前端都做不好吗?提升一下技术水平,放假的时候多看看技术。我心想,what?放假?还是赶紧研究吧~
网上找了一个大佬的moduleel-table-horizontal-scroll
安装
npm install el-table-horizontal-scroll
注册指令(main.js)
import horizontalScroll from 'el-table-horizontal-scroll'
Vue.use(horizontalScroll)
或者**(新建directive.js,main.js中注册)**
import horizontalScroll from 'el-table-horizontal-scroll'
export default {
directives: {
horizontalScroll
}
}
在el-table上添加v-horizontal-scroll
可以使用 always 或 hover ,默认值为hover,将鼠标悬停在表格上时,该栏将显示;
或者可以将其更改为always,并使栏始终显示
<el-table :data="data" v-horizontal-scroll="'always'">
</el-table>
**注意注意!!:**安装好后重启应用,原始的滚动条会看不清,需要重新自定义样式(一定要注意)
.el-table-horizontal-scrollbar{
transform: scaleY(2);
transform: scaleY(2) translateY(-10%);
}
.el-table-horizontal-scrollbar .el-scrollbar__thumb{
background-color: #A8A8A8;
}
效果图: