方法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...
});// 隐藏滚动条tableBodyWrapper.style.overflowX='hidden'; }); } } };</script><style>.table-container{overflow: hidden;white-space: nowrap; }.el-table__body-wrapper{cursor: grab; }.el-table__body-wrapper:active{cursor: grabbing; }</style> 解释: 获取DOM元素:在this.$nextTick()回调...
el.removeEventListener('scroll', binding.handler) el =null } } 把写好的指令在组件内注册后,即可生效。 我们的指令能够支持: 可指定作用的元素 是否禁止无限加载 支持设置滚动到底部的偏移量 支持防抖 完整代码: <template> <div> <el-table border height="400" :data="visibleData" :row-key="getRowK...
this.elwrapper = elwrapper; let elBody = everTable.getElementsByClassName('el-table__body')[0]; _this.elBody = elBody; elBody.style.position = 'absolute'; elBody.style.transition = 'all 500ms linear'; setTimeout(() => { let elRow = everTable.getElementsByClassName('el-table__row'...
在ElementUI中,表格组件(el-table)默认会在内容超出容器宽度时显示横向滚动条。如果你想自定义这些滚动条的样式,可以通过CSS来实现。以下是如何操作的具体步骤: 1. 确定ElementUI表格横向滚动条样式的默认设置 ElementUI的表格组件使用原生的HTML滚动条,因此默认情况下,滚动条的样式由浏览器的默认样式决定。 2. 查找...
简介:element-ui里的el-table在grid布局下切换数据有滚动条时不断增加? 今天在项目里面遇到了这个问题,相当炸裂,看了半天都没有看出什么问题,很是逆天,记录一下 下面使用代码情景复现一下:el-table是在 grid 布局下面的,不是子层级,中间还有一层 content 的元素包裹 ...
在 使用Vue 3.0 和 Element Plus 中修改 el-table 的滚动条样式,可能遇到了样式不生效的问题。这通常是因为 Element Plus 使用了自定义的滚动条组件 el-scrollbar,而不是浏览器默认的滚动条。因此,需要针对 el-scrollbar 组件进行样式定制。 <stylescoped>/* 滚动条整体部分 */::v-deep .el-scrollbar__bar...
简介: ElementUI el-table 设置固定列,横向滚动条在固定列的位置上无法滚动的问题 问题描述 当我们使用element table,有时我们需要部分的列固定,我们就给列添加了 fxied属性,但是这时候你会发现table的横向滚动条很难拖动,查找原因你会发现原来是固定的列把滚动条给挡住了,只有超出固定的部分滚动条才可以拖动。
// 滚动条的宽度/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;} ...
/*** 表格滚动条*/// 横向滚动条高度$scrollbarheight: 15px;.el-scrollbar{//偏移.el-scrollbar__bar{bottom:1px;}//高度.el-scrollbar__bar.is-horizontal{height:$scrollbarheight;}// 横向滚动条.el-scrollbar__bar.is-horizontal .el-scrollbar__thumb{// opacity:1;// 默认滚动条自带透明度heig...