6. 参考: elementUI——el-table组件滚动条的宽度设置——css基础
方法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的数据条数过多的时候,我们就要固定el-table的表头,从而实现竖向滚动的效果,不过默认的滚动条样式不太好看,所以我们可以修改一下滚动条的样式。其实很简单,css加上样式设置即可。 修改前的滚动条样式 修改语句 // 设置滚动条的宽度 /deep/ .el-table__body-wrapper::-webkit-scrollbar { width: 10...
此时,右侧商务标和基数表是动态循环出来的,左侧固定表头常规写法,如果这样写会出现一下问题 表格宽度超出,底部滚动条不会出现,表头显示不全的样式问题 image.png 解决方法: 前面固定表头也要通过动态循环的方式渲染到页面,如果表格表头有动态循环的就要保持一致, image.png 效果: image.png...
el-table可以手动调整列宽,当拉得非常宽的时候会出现横向滚动条 1.css设置不显示横向滚动条 /* 表格不出现横向滚动条 */.el-table--scrollable-x.el-table__body-wrapper{overflow-x: hidden; } 2.设置最大列宽,查阅element官网文档,header-dragend事件可以查看修改前后的列宽 ...
right: 5px!important; // 竖向滚动条宽度 height:100%; } 下方间隙样式: /deep/ .el-table__fixed { height: auto!important; bottom: 5px!important;//横向滚动条高度}/deep/ .el-table__fixed-body-wrapper { max-height: calc(100% - 36px) !important;//36px是设置的列表统一行高bottom:0!impo...
产品想要的效果是:内容保持单行显示,列间距保持一致,表格超出容器允许水平滚动。el-table-column是支持设置固定宽度的,在内容宽度可预知的情况下,也能满足这个需求。问题就在于如何让列宽动态适应内容的宽度。在官方文档也没找到这样的选项,应该是组件本身不支持。
// 滚动条的宽度/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;} ...
实现方式如下：1）创建或引入自定义CSS类，用于设置滚动条样式。2）在组件内部的el-table标签中添加`class`属性，引用刚刚创建的自定义CSS类，以应用所需样式。3）为了实现滚动条颜色、宽度等更为精细的调整，可以利用`:root`伪类或使用Vue的内联样式特性，直接在组件模板中设置样式。通过以上步骤，直播...