element-ui中的表格el-table滚动条样式修改

逃离我推掉我的手 2022-09-12 01:47 368阅读 0赞

// ----------修改elementui表格的默认样式-----------
    .el-table__body-wrapper {
      &::-webkit-scrollbar {
        height: 6px;
        width: 6px;
      }
      &::-webkit-scrollbar-track {
        background-color: #fff;
      }
      &::-webkit-scrollbar-thumb {
        background-color: #ccc;
      }
      &::-webkit-scrollbar-thumb:hover {
        background-color: #409eff;
      }
    }
     
    // 解决表格固定列问题
    .el-table__fixed,
    .el-table__fixed-right{
      height: calc(100% - 7px) !important;
      box-shadow: -5px -2px 10px rgba(0,0,0,.12) !important;
      .el-table__fixed-body-wrapper{
        height: calc(100% - 36px) !important;
      }
    }
    // 当表格没有滚动条时
    .el-table__body-wrapper.is-scrolling-none~.el-table__fixed-right{
      height: 100% !important;
      bottom: 0 !important;
      box-shadow: none !important;
    }
    // 当表格有纵向滚动条时
    .el-table--scrollable-y .el-table__fixed-right{
      right: 7px !important;
    }
    // 当表格只有横向滚动条，没有纵向滚动条时
    .el-table--scrollable-x:not(.el-table--scrollable-y) .el-table__fixed-right{
      right: 0 !important;
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，368人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS样式怎样修改滚动条的样式

以下是一些常见的滚动条样式的CSS代码示例： / 设置滚动条的宽度、高度、背景色和边框样式 / ::-webkit-scrollbar { wid

柔情只为你懂/ 2024年03月26日 19:09/ 0 赞/ 57 阅读

相关 css修改滚动条样式

HTML代码： <div class="element"> 内容 </div> CSS代码： .element{ over

今天药忘吃喽~/ 2023年01月01日 01:41/ 0 赞/ 205 阅读

相关 scrollbar滚动条修改样式

只有webkit内核才能用把下面三个伪元素放在设置了`overflow:scroll`的标签上，less要在每条前面加上`&` ::-webkit-scrol

╰半橙微兮°/ 2022年12月30日 07:41/ 0 赞/ 250 阅读

相关 Element-ui中的表格el-table滚动条样式修改

效果：不兼容IE 火狐 ![在这里插入图片描述][20200930135310372.png_pic_center] /滚动条的宽度/ /deep/

ゝ一纸荒年。/ 2022年12月11日 11:27/ 0 赞/ 363 阅读

相关修改滚动条样式

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

淡淡的烟草味﹌/ 2022年11月25日 04:19/ 0 赞/ 197 阅读

相关 css修改滚动条的样式

滚动条默认样式 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9

我就是我/ 2022年10月09日 03:11/ 0 赞/ 214 阅读

相关 element-ui中的表格el-table滚动条样式修改

// ----------修改elementui表格的默认样式----------- .el-table__body-wrapper { &::-w

逃离我推掉我的手/ 2022年09月12日 01:47/ 0 赞/ 369 阅读

相关修改默认滚动条样式

修改默认滚动条样式 ::-webkit-scrollbar-track-piece { /滚动条里面轨道/ background-color:f5f5f5; bo

- 日理万妓/ 2022年06月13日 07:25/ 0 赞/ 277 阅读

相关滚动条样式修改

<style> .innerbox::-webkit-scrollbar {/滚动条整体样式/ width: 4px;

淩亂°似流年/ 2022年02月25日 13:19/ 0 赞/ 349 阅读

相关滚动条样式修改

记录一下修改滚动条需要修改的样式： ::-webkit-scrollbar { width: 8px; he

绝地灬酷狼/ 2021年11月17日 21:00/ 0 赞/ 387 阅读