记录一次el-table底部滚动条固定

49 阅读1分钟

客户说,我们这数据太多了,每次想看后面几列的数据都需要将页面的滚动条拉到最底部,能不能将滚动条固定在最底下。我说研究一下,看看怎么实现好,老板不开心了,这种简单的东西,前端都做不好吗?提升一下技术水平,放假的时候多看看技术。我心想,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;
}

效果图:

QQ截图20240913142221.png

c64817f2-33ff-43d3-9728-9e50bda2b288.gif