5.2 所以解决办法就是将el-table的高度固定,通过设置el-table的一个max-height属性来保证 搜索框高度(el-form) + 中间内容高度(el-table) + 分页器高度(el-pagination) <= 当前页面可以展示的高度 1. 就不会出现滚动条,而el-table里面多出的内容就在el-table自己产生的滚动条里滚动,问题完美解决. 5.3 代码...
native: Boolean, // 是否使用本地,设为true则不会启用element-ui自定义的滚动条 wrapStyle: {}, // 包裹层自定义样式 wrapClass: {}, // 包裹层自定义样式类 viewClass: {}, // 可滚动部分自定义样式类 viewStyle: {}, // 可滚动部分自定义样式 noresize: Boolean, // 如果 container 尺寸不会发生...
在Element UI中,el-table的滚动条通常位于.el-table__body-wrapper元素内。因此,你需要针对这个元素及其伪元素进行样式修改。 编写CSS代码以修改滚动条的样式: 你可以使用CSS伪元素::-webkit-scrollbar及其子伪元素(如::-webkit-scrollbar-thumb、::-webkit-scrollbar-track等)来定制滚动条的样式。以下是一个示例...
修改滚动条样式 css // 设置滚动条的宽度 .el-table__body-wrapper::-webkit-scrollbar { width: 4px; } // 设置滚动条的背景色和圆角 .el-table__body-wrapper::-webkit-scrollbar-thumb { background-color: #535353; -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); border-radius:...
elementui修改table滚动条样式 ::v-deep .el-table__body-wrapper::-webkit-scrollbar { width: 8px; /*滚动条宽度*/ height: 8px; /*滚动条高度*/ } ::v-deep .el-table__body-wrapper::-webkit-scrollbar-track { border-radius: 0px; /*滚动条的背景区域的圆角*/...
当el-table的数据条数过多的时候,我们就要固定el-table的表头,从而实现竖向滚动的效果,不过默认的滚动条样式不太好看,所以我们可以修改一下滚动条的样式。其实很简单,css加上样式设置即可。 修改前的滚动条样式 修改语句 // 设置滚动条的宽度 /deep/ .el-table__body-wrapper::-webkit-scrollbar { width: 10...
如果你想修改element-ui中的表格el-teble的滚动条样式,可以参考一下以下的css样式代码: .el-table__body-wrapper{background-color:#ddd;}.el-table__body-wrapper::-webkit-scrollbar{width:8px!important;height:8px!important;} 或者参考以下的css样式代码: ...
public.css,scroll-item是自定义类,类似于指令效果,加上clssname就自动生成scrollbar。之所以不用指令,是因为无法修改element-ui组件,用classname方便一点。transfer-main类好像是我用的另外一个插件里面的。 .scroll-item,.el-table__body-wrapper,.el-transfer-panel__list,.transfer-main { ...
之前在使用element-ui表格的时候有修改过滚动条的样式,但是没有找到官方的途径后来是这么改的,可以参考看看//滚动条的宽度.your-table .el-table__body-wrapper::-webkit-scrollbar { width: 10px; height: 10px;}//滚动条的滑块.your-table .el-table__body-wrapper::-webkit-scrollbar-thumb...
简介:修改elementui table 组件滚动条样式 .el-table::webkit-scrollbar{display:block;height:938px;width:6px;}.el-table::webkit-scrollbar-thumb{box-shadow:inset000pxwhite;-webkit-box-shadow:inset000pxwhite;background:rgba(64,158,255,0.6);border-radius:4px;}.el-table::-webkit-scrollbar-track...