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...
修改滚动条样式 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:...
当el-table的数据条数过多的时候,我们就要固定el-table的表头,从而实现竖向滚动的效果,不过默认的滚动条样式不太好看,所以我们可以修改一下滚动条的样式。其实很简单,css加上样式设置即可。 修改前的滚动条样式 修改语句 // 设置滚动条的宽度 /deep/ .el-table__body-wrapper::-webkit-scrollbar { width: 10p...
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; /*滚动条的背景区域的圆角*/...
你想问的是elementui表格宽度超出滚动要怎么操作？操作步骤如下：1、在“el-table”标签上添加 “style”属性，设置表格宽度和滚动条样式。2、给表格的每一列设置“width”属性，表示该列的宽度。如果表格中有一列的宽度不指定，则该列的宽度会自适应剩余空白区域，可能会造成表格宽度超出的情况。3、...
如果你想修改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样式代码: ...
之前在使用element-ui表格的时候有修改过滚动条的样式,但是没有找到官方的途径后来是这么改的,可以参考看看//滚动条的宽度.your-table .el-table__body-wrapper::-webkit-scrollbar { width: 10px; height: 10px;}//滚动条的滑块.your-table .el-table__body-wrapper::-webkit-scrollbar-thumb...
第一步,创建一个100px宽度的div元素插入body中,并设置滚动模式,widthNoScroll保存该div的offseWidth,即100; 第二步,创建一个100%宽度的div元素,插入到第一步创建的div中,widthWithScroll保存offseWidth值,在本人电脑中为83; 第三步,返回值为widthNoScroll - widthWithScroll,即17。
::-webkit-scrollbar 属性，可以自定义滚动条。Element UI的滚动条本质应该也是滚动条，上述属性配上类选择器应该可以解决。