在使用 Element UI 的 el-table 组件时,实现滚动条隐藏但内容仍可滚动的需求,并且确保滚动条不占用额外的宽度,可以通过 CSS 样式来达成。由于滚动条的默认行为是占用一定的宽度,直接隐藏滚动条(如使用 overflow-y: 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...
el-table可以手动调整列宽,当拉得非常宽的时候会出现横向滚动条 1.css设置不显示横向滚动条 /* 表格不出现横向滚动条 */.el-table--scrollable-x.el-table__body-wrapper{overflow-x: hidden; } 2.设置最大列宽,查阅element官网文档,header-dragend事件可以查看修改前后的列宽 添加事件header-dragend 控制台打印...
此时,右侧商务标和基数表是动态循环出来的,左侧固定表头常规写法,如果这样写会出现一下问题 表格宽度超出,底部滚动条不会出现,表头显示不全的样式问题 image.png 解决方法: 前面固定表头也要通过动态循环的方式渲染到页面,如果表格表头有动态循环的就要保持一致, image.png 效果: image.png...
代码如下,我直接放类里面了,具体targetTableWrapperEl是哪个dom可以自己看一下具体的dom结构,表格的容器,因为宽度不变,所以滑块的宽度我们通过可滚动距离和容器宽度换算成一个百分比 因为el-table初始化的问题,初始化计算的时候最好做个延迟,或者监听宽度变化重设宽度,这里我实际代码两个都做了 ...
[element-ui] el-table组件滚动条的宽度设置 1. 2. 3. 4. 5. 6. 参考: elementUI——el-table组件滚动条的宽度设置——css基础
el-table表格设置滚动条 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。如果表格只有一条数据...
el-table表格设置滚动条 el-table表格设置滚动条 el-table超出⼀定⾼度设置滚动条两种⽅法，设置height和max-height都可出现滚动条。1、给table设置height属性为250，表格固定有300px这么⾼。<el-table :data="tableData"height="250"border style="width: 100%"> 2、给他变了设置max-height为300，表格...
直播app开发搭建,el-table去掉滚动条 // 隐藏滚动条 /deep/ .el-table__body-wrapper::-webkit-scrollbar { /*width: 0;宽度为0隐藏*/ width: 0px; } /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb { border-radius: 2px; height: 50px; background: #eee; } /deep/ .el-table_...
现在需求是右侧滚动条不好看,需要去除滚动条,并隐藏滚动条所占列的位置 // ---修改elementui表格的默认样式---.el-table__body-wrapper{ &::-webkit-scrollbar { // 整个滚动条width:0; // 纵向滚动条的宽度background:rgba(213,215,220,0.3);border: none; } &::-webkit-scrollbar...