方法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初始化的问题,初始化计算的时候最好做个延迟,或者监听宽度变化重设宽度,这里我实际代码两个都做了 /** * 自动设置Bar */ resetBar () { const { targetTableWrapperEl } = this const widthPercentage = (targetTableWrapperEl.clientWidth * 100 / targetTableWrapperEl.scrollWidth) const thumb...
此时,右侧商务标和基数表是动态循环出来的,左侧固定表头常规写法,如果这样写会出现一下问题 表格宽度超出,底部滚动条不会出现,表头显示不全的样式问题 image.png 解决方法: 前面固定表头也要通过动态循环的方式渲染到页面,如果表格表头有动态循环的就要保持一致, image.png 效果: image.png...
::v-deep .el-table__body-wrapper::-webkit-scrollbar {// width: 20px; /* 纵向滚动条 */height: 8px; /* 横向滚动条 必写 */}/* 设置滚动条样式 */::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {设置滚动条哑颜色,根据自己选择设置// background-color: #dde;border-radius...
element el-table 合计时发现横向滚动条在合计上方 解决:直接修改样式即可(防止影响全局请加scope,然后再样式穿透::v-deep) 参考: element el... jack_rofer阅读 2,083评论 1赞 1 el-table中,动态添加表头数据,数据超出显示横向滚动条,并且使横向滚动条一直保持最后面 如上图,点击新增列,表头新增数据,数据过多...
1. 横向滚动条的出现 在el-table中,当表格内容的宽度超出了容器的宽度时,横向滚动条会自动出现。这种情况经常发生在表格中有大量的列需要展示,或者表格数据的内容较为宽泛,需要横向滚动来浏览完整的内容。 2. 横向滚动条的距离问题 横向滚动条的距离指的是滚动条相对于表格左侧的位置,也就是滚动条的横向偏移量。
因为表格的列数多,所以table必然会出现横向滚动条。当行数过多时,出现纵向滚动条,操作时,就需要先滚动到表格底部,然后进行左右的拉动,这样是用户操作很不方便。 应对方案 当数据过多,table的X轴滚动条不在可视区域时,给table的父级容器添加一个滚动条perfectScrollbar,然后将perfectScrollbar的scroll值赋值给table...
el-table 实现表格数据刷新后,横向滚动条自动回滚 在列表刷新接口请求成功以后,加上如下代码 tableName 处填入 el-table 组件相应的ref属性的值
通过对横向滚动条的颜色、宽度、样式等属性的调整,可以让element table的横向滚动条更符合用户的视觉需求,更加美观大方,提升用户的使用体验。 二、如何实现element table横向滚动条样式 1.定义样式 首先,我们要在样式表中定义出element table横向滚动条的样式,这样才能对横向滚动条进行样式定制。以下是一个基本的样式...