el-table增加顶部滚动条,表格实现上下双滚动条 效果图: 实现方式: 1.加一个div,宽度和表格相同: 初始宽度:width:0 2.监听表格宽度,并给元素和滚动条元素绑定滚动事件: 原理:两个滚动条滚动时,同时控制另一个滚动条滚动。 表格上下滚动条监听滚动距离 上下滚动条 ---滚动距离双向绑定 html: <divclass="top-s...
1:首先给el-table添加 ref属性 及 row-click事件 2:row-click事件中记录下当前el-table的滚动条位置 //获取当前滚动条的位置 并赋值给 this.Nowscroll 记录下来 let vmEl = this. el const scrollParent = vmEl.querySelector('.el-table__body-wrapper') this.Nowscroll = scrollParent.scrollTop 3:刷新...
默认情况下返回滚动条会自动置顶, 但直接对scrollTop赋值没有效果,使用$nextTick也是没有效果。 但是使用setTimeout可以赋值成功。 代码如下: <template><divclass="table"><el-table ref="table">...</el-table></div></template><script>exportdefault{data(){return{scrollTop:0}},//路由守卫beforeRouteE...
滚动【测试1】tab 下的表格,然后点击 【测试2】tab,点击【测试2】 tab 下的 【重置表格1 scrollTop】按钮,最后回到 【测试1】 tabWhat is Expected?回到【测试1】 tab 后, 表格应该滚动到顶部What is actually happening?观察到【测试1】 tab 下表格滚动条依然是在上次的位置,未滚动到顶部Additional comments(...
需要注意的是,如果table存在滚动条,就会打印不全了,调整好列宽即可,打印效果图如下 附上全部代码: 1<template>2<div>3<el-card shadow="never" >4<el-button v-print="printObj">nb打印</el-button>5<el-button @click="onPrint">printJs打印</el-button>6<table ref="printId" id="printId" cellsp...
el-table__body-wrapper::-webkit-scrollbar-thumb { display: block; background-color: rgba(144, 147, 153, 0.3); } // 火狐滚动条样式 /* 修改firefox浏览器默认滚动条样式 */ div { scrollbar-width: 5px; scrollbar-color: transparent transparent; } .table-wrap:hover div { scrollbar-width:...