方法1、在el-table上手动添加滚动条 1、在el-table上方添加一个div,div的宽度和表格的宽度相同。 <el-table ref="tableRef" :data="list" v-loading.body="listLoading"> </el-table> 1. 2. 3. 4. 5. 6. 给两个div添加样式,里面的div一定要设置高度,不设置的话滚动条出不来 .top-scroll {...
6. 参考: elementUI——el-table组件滚动条的宽度设置——css基础
第一步,创建一个100px宽度的div元素插入body中,并设置滚动模式,widthNoScroll保存该div的offseWidth,即100; 第二步,创建一个100%宽度的div元素,插入到第一步创建的div中,widthWithScroll保存offseWidth值,在本人电脑中为83; 第三步,返回值为widthNoScroll - widthWithScroll,即17。
::v-deep .el-table__body-wrapper::-webkit-scrollbar { width: 8px; /*滚动条宽度*/ height: 8px; /*滚动条高度*/ } ::v-deep .el-table__body-wrapper::-webkit-scrollbar-track { border-radius: 0px; /*滚动条的背景区域的圆角*/ background-color: rgba(2, 29, 87, 1); /*滚动条...
//滚动条的宽度 ::-webkit-scrollbar { width: 10px; height: 10px; } //滚动条的滑块 ::-webkit-scrollbar-thumb { background-color: #a1a3a9; border-radius: 3px; } 滚动条样式存在兼容性问题,以上的样式是在webkit浏览器下可生效的
// 获取浏览器的滚动条宽度 let gutter = scrollbarWidth(); // wrap内联样式 let style = this.wrapStyle; ... scrollbarWidth方法在scrollbar-width.js中被默认导出。 import Vue from 'vue'; // 闭包变量,用于记录滚动条宽度 let scrollBarWidth; ...
当el-table的数据条数过多的时候,我们就要固定el-table的表头,从而实现竖向滚动的效果,不过默认的滚动条样式不太好看,所以我们可以修改一下滚动条的样式。其实很简单,css加上样式设置即可。 修改前的滚动条样式 修改语句 // 设置滚动条的宽度 /deep/ .el-table__body-wrapper::-webkit-scrollbar { width: 10...
// 滚动条的宽度/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;} ...
elementui 横向滚动条样式下面是一些常见的示例代码: 设置滚动条颜色为红色: /* 水平滚动条 */ ::-webkit-scrollbar { width: 8px; /* 设置滚动条宽度 */ } ::-webkit-scrollbar-thumb { background-color: red; /* 设置滑块颜色 */ } ::-webkit-scrollbar-track { background-color: #f5f5f5; ...