在 使用Vue 3.0 和 Element Plus 中修改 el-table 的滚动条样式,可能遇到了样式不生效的问题。这通常是因为 Element Plus 使用了自定义的滚动条组件 el-scrollbar,而不是浏览器默认的滚动条。因此,需要针对 el-scrollbar 组件进行样式定制。 <stylescoped>/* 滚动条整体部分 */::v-deep .el-scrollbar__bar...
1. 确认问题 首先,我们确认问题是关于Element UI框架中的el-table组件的横向滚动条样式调整。 2. 查找el-table组件的横向滚动条样式设置 在Element UI中,el-table组件的滚动条样式默认继承自全局滚动条样式。但是,我们可以通过CSS覆盖这些默认样式,以自定义滚动条的外观。 3. 修改横向滚动条的宽度样式 为了修改el-...
实现方式,自定义全局的element样式如下: /*** 表格滚动条*/// 横向滚动条高度$scrollbarheight: 15px;.el-scrollbar{//偏移.el-scrollbar__bar{bottom:1px;}//高度.el-scrollbar__bar.is-horizontal{height:$scrollbarheight;}// 横向滚动条.el-scrollbar__bar.is-horizontal .el-scrollbar__thumb{// ...
vue3修改滚动条的方式: /* ---el-table滚动条公共样式--- */ .el-scrollbar { // 横向滚动条 .el-scrollbar__bar.is-horizontal .el-scrollbar__thumb { opacity: 1; // 默认滚动条自带透明度 height: 8px; // 横向滑块的宽度 border-radius: 2px; // 圆角度数 background-color: rgba(136, 2...
方法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...
}/deep/ .el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar{height:7px !important;// 这里改为7px,是因为横向滚动条不知什么原因被挤压成了一条线,不好拖拽,因此加高一下}/deep/ .el-table--fluid-height .el-table__fixed{bottom:5px !important; ...
或者参考以下的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;} ...
滑槽因为默认的样式是opacity: 0所以我顺手做了el根据鼠标事件自动显示和隐藏 滑块主要是需要计算宽度和向左滑动的距离 #宽度计算 代码如下,我直接放类里面了,具体targetTableWrapperEl是哪个dom可以自己看一下具体的dom结构,表格的容器,因为宽度不变,所以滑块的宽度我们通过可滚动距离和容器宽度换算成一个百分比 ...
当我们使用element table,有时我们需要部分的列固定,我们就给列添加了 fxied属性,但是这时候你会发现table的横向滚动条很难拖动,查找原因你会发现原来是固定的列把滚动条给挡住了,只有超出固定的部分滚动条才可以拖动。 解决办法 法一: 做法:修改el-table__fixed样式。 效果:就是设置bottom值,使得不盖住滚动条。
//鼠标划入滚动条展现,鼠标划出滚动条隐藏 function scrollbarShowHidden(element){ element.addClass('scrollbarHide'); element.hover(function() { element.addClass('scrollbarShow'); }, function() { element.removeClass('scrollbarShow'); }); } scrollbarShowHidden($('.el-table__body-wrapper'))...