通过设置tableBodyWrapper.style.overflow = 'hidden';隐藏原生的滚动条。 实现 要实现拖拽功能,并确保tableBodyWrapper可以正确拖拽,需要设置事件监听器和对样式进行一些调整。下面是实现代码: <template> <div ref="tableContainer" class="table-container"> <el-table :data="tableData"style="width: 100%"> <...
方法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...
let elwrapper = el.getElementsByClassName("el-table__body-wrapper")[0]; //console.log("容器:", elwrapper); //设置容器高度,50固定不要随意修改 elwrapper.style.height = options.maxNumner * 50 + "px"; //获取表格主体 let elBody = elwrapper.getElementsByClassName("el-table__body")[0];...
修改原有边框的高度,*///设置 表格行总高度.el-scrollbar{.el-scrollbar__wrap{height:calc(100% - $scrollbarheight) !important;}}//清除表格左边框.el-table__border-left-patch{height:0px;}//缩短表格左边框.el-table--border:before{height:calc(100% - $scrollbarheight) !important...
对于水平滚动条,你可以类似地修改.el-table或.el-table__header-wrapper的伪元素样式。 4. 集成到项目中 将上述CSS代码添加到你的项目中,通常是在一个全局的CSS文件中,或者在组件的<style>标签内(如果使用的是单文件组件)。确保这些样式在Element Table组件的样式之后加载,以便覆盖默认样式。 5. 其他自...
tableBodyWrapper.offsetLeft;constwalk=(x-startX)*2;// scroll-fasttableBodyWrapper.scrollLeft=scrollLeft-walk;});// 隐藏滚动条tableBodyWrapper.style.overflowX='hidden';});}}};</script><style>.table-container{overflow:hidden;white-space:nowrap;}.el-table__body-wrapper{cursor:grab;}.el-table...
在 使用Vue 3.0 和 Element Plus 中修改 el-table 的滚动条样式,可能遇到了样式不生效的问题。这通常是因为 Element Plus 使用了自定义的滚动条组件 el-scrollbar,而不是浏览器默认的滚动条。因此,需要针对 el-scrollbar 组件进行样式定制。 <stylescoped>/* 滚动条整体部分 */::v-deep .el-scrollbar__bar...
// 解决有合计行时,横向滚动条在左侧、右侧固定列中无法选中问题.el-table__fixed,.el-table__fixed-right{pointer-events:none;>*{pointer-events:all;}} 问题代码,感兴趣的可以自己试下 <!-- element ui 样式demo --><template><divclass="main-content"><divclass="my-title">固定列</div><divclass...
1.当使用了合计功能把对el-table__body-wrapper进行超出隐藏,将滚动条加到合计区域el-table__footer-wrapper,此时通过监听合计区域的滚动事件来触发el-table__body-wrapper的滚动。 2.使用虚拟滚动条:为el-table添加虚拟滚动条。通过虚拟滚动条的滚动来触发el-table__footer-wrapper和el-table__body-wrapper的滚动...
4.1 当页面的内容高度(或宽度)超过容器(装这些内容的容器)的高度(或宽度)时,就会产生纵向(或横向)滚动条,页面内 容从上到下排版为1.搜索部分(el-form)、2.中间内容显示(el-table),3.底部分页器(el-pagination)。 4.2 而页面显示的高度有限,当选择每页显示20条时,分页器就被挤出了可视区域,一直往下滑动才能...