然而,更直接控制横向滚动的方法是确保表格的容器有一个固定的宽度,并且表格内容的总宽度(即所有列宽度的和)超过这个固定宽度。 3. 实现横向滚动的具体方法 3.1 CSS样式控制 你可以通过CSS来设置el-table的父容器宽度,并允许表格内容超出这个宽度时显示横向滚动条。这里是一个简单的示例: ...
这通常是因为 Element Plus 使用了自定义的滚动条组件 el-scrollbar,而不是浏览器默认的滚动条。因此,需要针对 el-scrollbar 组件进行样式定制。 <stylescoped>/* 滚动条整体部分 */::v-deep .el-scrollbar__bar{opacity:1;/* 使滚动条不透明 */}/* 横向滚动条的滑块 */::v-deep .el-scrollbar__bar...
先上效果图: 实现方式,自定义全局的element样式如下: /** * 表格滚动条 */ // 横向滚动条高度 $scrollbarheight: 15px; .el-scrollbar { //偏移 .el-scrollbar__bar{ bottom: 1px; } //高度 .el-scrollbar__bar.is-horizontal{ height: $scrollbarheight; } // 横向滚动条 .el-scrollbar__bar....
将el-table的宽度放大后,页面底部会出现横向滚动条,但是如果el-table上方的布局已经被写死了,会出现留白 效果图:
因为表格的列数多,所以table必然会出现横向滚动条。当行数过多时,出现纵向滚动条,操作时,就需要先滚动到表格底部,然后进行左右的拉动,这样是用户操作很不方便。 应对方案 当数据过多,table的X轴滚动条不在可视区域时,给table的父级容器添加一个滚动条perfectScrollbar,然后将perfectScrollbar的scroll值赋值给table...
步骤1:设置表格样式 在隐藏el-table自带的横向滚动条之前,我们需要首先设置表格的样式,以便更好地控制表格的外观。我们可以通过给el-table组件添加一个自定义的class来实现这个目的。 <el-table class="custom-table"></el-table> 1. 在上面的代码中,我们给el-table组件添加了一个名为"custom-table"的class。你...
或者参考以下的css样式代码: // 滚动条的宽度/deep/.el-table__body-wrapper::-webkit-scrollbar{width:8px;// 横向滚动条height:8px;// 纵向滚动条 必写}// 滚动条的滑块/deep/.el-table__body-wrapper::-webkit-scrollbar-thumb{background-color:#ddd;border-radius:3px;} ...
工作中用到的el-table显示大批量数据的时候,一页放不下,一般性的处理方案是限定了高,让表格固定表头之后内部可以滚动,不过因为实际操作中样式的问题,需要我把整个表格高度全部显示出来,这样就造成了一个问题,就是横向滚动不方便 不过作为mac用户已开始没啥感觉,但是被用windows的同事吐槽了好久,于是终于决定花半天时...
vue3修改滚动条的方式: /* ---el-table滚动条公共样式--- */ .el-scrollbar { // 横向滚动条 .el-scrollbar__bar.is-horizontal .el-scrollbar__thumb { opacity: 1; // 默认滚动条自带透明度 height: 8px; // 横向滑块的宽度 border-radius: 2px; // 圆角度数 ...
右侧间隙样式: .el-table__fixed-right { right: 5px!important; // 竖向滚动条宽度 height:100%; } 下方间隙样式: /deep/ .el-table__fixed { height: auto!important; bottom: 5px!important;//横向滚动条高度}/deep/ .el-table__fixed-body-wrapper { ...