通常情况下,el-table组件本身提供了max-height属性,当内容超过这个高度时,会自动出现滚动条。如果你需要自定义滚动条样式,可以通过CSS来实现。 css .el-table__body-wrapper { max-height: 400px; /* 设置最大高度 */ overflow-y: auto; /* 启用垂直滚动条 */ overflow-x: auto; /* 启用水平滚动条,...
顶部滚动条 .top-scroll{overflow-y:hidden;overflow-x:auto; .top-scroll-content{background-color:#FFF;height:1px;}} 底部滚动条 我的需求是这个底部滚动条就不要了 如果想要 上下双滚动条, 这个不写就行 ::v-deep .el-table--scrollable-x .el-table__body-wrapper{overflow-x:hidden} 如果滚动条还...
方法1、在el-table上手动添加滚动条 1、在el-table上方添加一个div,div的宽度和表格的宽度相同。 <div ref="topScroll" class="top-scroll"> <div class="top-scroll-content" :style="{ width: topScrollWidth }"></div> </div> <el-table ref="tableRef" :data="list" v-loading.body="listLoad...
原理:两个滚动条滚动时,同时控制另一个滚动条滚动。 表格上下滚动条监听滚动距离 上下滚动条 ---滚动距离双向绑定 html: <divclass="top-scroll"ref="topScroll"><divclass="top-scroll-content":style="tableWidth"></div></div><el-tableref="tableData2":data="tableData"class="e-table"@selection-c...
// el-table标签里设置height为100%height="100%"// 设置最高高度,并隐藏溢出部分style="width: 100%;max-height: 600px;overflow: auto;"// 右上角缺失部分填充颜色/deep/.el-table.el-table__cell.gutter{background-color:#B5DBF0!important;}...
this.tableColumns.push({//...添加的新的一条数据});this.$emit('changeReload');// 表格表头增加时,表格重新渲染,这样可以将滚动条滚动到最右侧,nextTick才会是最终起效的//滚动到最右侧this.$nextTick(() =>{consttableEl =document.getElementsByClassName('el-table__body-wrapper')[0]; table...
}); //跳到顶部操作 this.$refs.containerTable.bodyWrapper.scrollTop =0 //可根据页面高度设置 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 参考: 2021-12-10 el-table 行内新增,滚动条自动滚到最顶部,或者最底部
当el-table的数据条数过多的时候,我们就要固定el-table的表头,从而实现竖向滚动的效果,不过默认的滚动条样式不太好看,所以我们可以修改一下滚动条的样式。其实很简单,css加上样式设置即可。 修改前的滚动条样式 修改语句 // 设置滚动条的宽度 /deep/ .el-table__body-wrapper::-webkit-scrollbar { width: 10...
记录鼠标滚动距离然后设置给table然后让table自动更新回scroller 需要三个事件 onmousemove onmouseup onmousedown 注意点 mousemove建议挂在document上 右键+ ctrl这类特殊情况需要处理 #计算距离 通过e.clientX可以得出每次滚动的offset, 但是这个offset需要换算成具体需要滚动的scrollLeft ...
el-table超出一定高度设置滚动条两种方法,设置height和max-height都可出现滚动条。 1、给table设置height属性为250,表格固定有300px这么高。 <el-table:data="tableData"height="250"border style="width: 100%"> 2、给他变了设置max-height为300,表格数据超出250。如果表格只有一条数据,且高度没有超过300.表格...