el-table 横向滚动条固定在可视窗口底部

作者: IssunRadiance | 来源:发表于2023-05-14 18:53 被阅读0次

组件之路---固钉组件
js获取窗口滚动条高度、窗口可视范围高度、文档实际内容高度、滚动
41 紧贴底部的页面
在Bootstrap框架下实现固定页脚
js相关-实用方法收集
clientHeight、scrollTop、getBoundi
web 开发小功能的记录
一些问题
固定定位透明度背景图片设置
12 js07 window系列方法，脚本化CSS

使用v-horizontal-scroll

源码仓库地址:
GitHub - mizuka-wu/el-table-horizontal-scroll: el-table awlays show horizontal-scroller on bottom

安装

npm install el-table-horizontal-scroll

main.js中全局注册指令

import horizontalScroll from 'el-table-horizontal-scroll'
Vue.use(horizontalScroll)

在el-table上添加v-horizontal-scroll

可以使用 always 或 hover ,
默认值为hover，将鼠标悬停在表格上时，该栏将显示；
always，并使栏始终显示

<el-table :data="data"  v-horizontal-scroll="'always'">
 
</el-table>

效果

image.png

样式可自己调整

组件之路---固钉组件
固钉组件的作用是将页面元素固定在可视区域之内。需求固钉的基本功能就是将元素固定在页面的特定位置，即使存在滚动条...
js获取窗口滚动条高度、窗口可视范围高度、文档实际内容高度、滚动
在做滚动获取更多的这个需求中，我们需要获取到滚动条高度、窗口可视范围高度、文档实际内容高度、滚动条离浏览器底部的高...
41 紧贴底部的页面
解决将footer固定在页面底部的问题在线预览 100vh占据100%可视窗口，利用calc计算，将底部的高度减...
在Bootstrap框架下实现固定页脚
固定在窗口底部不会随内容滚动而消失。固定在页面底部粘在内容底部，内容未撑满窗口时则粘在窗口底部。参考 ht...
js相关-实用方法收集
在有滚动条的情况下，判断页面是否滚动到了底部 $(window).scrollTop()：获取窗口滚动条的距离$...
clientHeight、scrollTop、getBoundi
clientHeight：可视窗口的高度scrollTop：滚动条距离document顶部的距离 //let ...
web 开发小功能的记录
1.获取窗口的宽度 2. 检测页面的滚动条是否滚动到底部
一些问题
1. 网页出现横向滚动条？让横条没有：两个都去掉？更简单了火狐底部滚动条不显示： 2. 网页图标？ 3. H...
固定定位透明度背景图片设置
固定定位是一种类似的绝对定位，但它永远相对与浏览器窗口起点，固定定位会固定在定位处，不随滚动条滚动 ie6不支持固...
12 js07 window系列方法，脚本化CSS
滚动条移动距离、获取可视窗口属性、获取dom元素尺寸、滚动条系列方法、脚本化CSS 【封装函数，形成工具库tool...