精华内容
下载资源
问答
  • element-ui中的表格el-table滚动条样式修改

    万次阅读 多人点赞 2019-04-23 16:31:41
    /deep/ .el-table__body-wrapper::-webkit-scrollbar { width: 6px; // 横向滚动条 height: 6px; // 纵向滚动条 必写 } // 滚动条的滑块 /deep/ .el-table__body-wrapper::-webkit-scrollbar-...

      可以参考看看:

      // 滚动条的宽度
      /deep/ .el-table__body-wrapper::-webkit-scrollbar {
        width: 6px; // 横向滚动条
        height: 6px; // 纵向滚动条 必写
      }
      // 滚动条的滑块
      /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
        background-color: #ddd;
        border-radius: 3px;
      }

      如果是整个页面的滚动条风格是一致的,直接改全局的滚动条样式也可以有效果

    //滚动条的宽度
    ::-webkit-scrollbar {
      width: 8px;
      height: 8px;
      background-color: #e4e4e4;
      border-radius: 6px;
    }
    //滚动条的滑块
    ::-webkit-scrollbar-thumb {
      background-color: #a1a3a9;
      border-radius: 6px;
    }

     滚动条样式存在兼容性问题,以上的样式是在webkit浏览器下可生效的

    ==================

    页面内滚动条样式美化css3 

    .treeScrollbar::-webkit-scrollbar-track-piece {
      //滚动条凹槽的颜色,还可以设置边框属性
      background-color: #f1f1f1;
    }
    
    .treeScrollbar::-webkit-scrollbar {
      //滚动条的宽度
      width: 10px;
      height: 10px;
    }
    
    .treeScrollbar::-webkit-scrollbar-thumb {
      //滚动条的设置
      background-color: #c1c1c1;
      background-clip: padding-box;
      min-height: 28px;
      border-radius: 8px;
    }
    
    .treeScrollbar::-webkit-scrollbar-thumb:hover {
      background-color: #a8a8a8;
    }

     

    展开全文
  • el-table滚动条样式

    2021-04-16 16:58:24
    /deep/ .el-table__body-wrapper::-webkit-scrollbar { width: 6px; height: 6px; } /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb { background-color: rgba(3, 168, 242, 0.1); border-radius: 3px; }

    /deep/ .el-table__body-wrapper::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    }

    /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: rgba(3, 168, 242, 0.1);
    border-radius: 3px;
    }

    展开全文
  • 因为用户需求,需要兼容谷歌、火狐、IE10的滚动条样式,el-table组件只兼容谷歌,火狐与IE显示默认样式,样式不统一。使用el-scrollbar进行滚动条样式统一。 问题描述: 部分源代码如下图所示:(注:el-table中,...

    记录贴,对自己遇到的问题做一个记录,刚接触前端1个月,有不对的地方希望各位大佬指出。

    项目场景:

    因为用户需求,需要兼容谷歌、火狐、IE10的滚动条样式,el-table组件只兼容谷歌,火狐与IE显示默认样式,样式不统一。使用el-scrollbar进行滚动条样式统一。


    问题描述:

    部分源代码如下图所示:(注:el-table中,height属性放到style里,height没有生效,目前没有找到原因,所以放在外边)

    <el-table style="width:100%" height="25vh">
    	<el-table-column>
    		...</el-table-column>
    </el-table>
    

    FireFox 和 IE 样式:
    在这里插入图片描述

    Google 样式:
    在这里插入图片描述
    添加el-scrollbar标签,el-scrollbar横向滚动条没有距离,el-table滚动条可以滑动且正常显示
    例如:

    <el-scrollbar style="height:28vh;width:1459px;">
    	<el-table style="width:100%">
    		<el-table-column>
    			...</el-table-column>
    	</el-table>
    </el-scrollbar>
    

    IE和FireFox样式:
    在这里插入图片描述
    Google (无横向滚动条):
    在这里插入图片描述


    原因分析:

    el-scrollbar与el-table滚动条样式冲突,因为el-table标签自带滚动条,但是el-table生成滚动条样式不能兼容IE,所以需要使用el-scrollbar。

    1.出现2个滚动条是因为没有隐藏其中一个滚动条。

    2.el-scrollbar生成滚动条没有滚轮,横向滚轮没有定位到表格的横向距离。


    解决方案:

    1、因为IE和火狐在其他地方的滚动条都会显示横向滚动条,谷歌不会显示,在这里为了方便在全局添加了overflow-x: hidden;代码。
    在这里插入图片描述

    .el-scrollbar__wrap {
    	overflow-x: hidden;
    }
    

    2、样式显示为:
    IE和FireFox:
    在这里插入图片描述
    Google :
    在这里插入图片描述
    3、通过F12定位查看边距,发现el-scrollbar无滑轮是因为没有定位到表格的宽度,尝试的在el-scrollbar和el-table之间加了一个div,设置了与表格相同的宽度,滑轮能正常出现,具体逻辑不太了解。

    <el-scrollbar style="height:28vh;">
    	<div style="width:2520px;">
    		<el-table style="width:100%">
    			...</el-table>
    	</div>
    </el-scrollbar>
    

    火狐、谷歌、IE样式:
    在这里插入图片描述

    展开全文
  • el-table设置height后,数据越界的时候会显示垂直滚动条,但是那个滚动条是真的丑 给el-table添加classs随便写个名字,此处用的是bueatyScroll /* *改变浏览器默认的滚动条样式 */ .bueatyScroll .el-table__body...

    el-table设置height后,数据越界的时候会显示垂直滚动条,但是那个滚动条是真的丑

    给el-table添加classs随便写个名字,此处用的是bueatyScroll

    /*
    *改变浏览器默认的滚动条样式
    */
    .bueatyScroll .el-table__body-wrapper::-webkit-scrollbar-track-piece {
        background-color:#f8f8f8;
    }
    .bueatyScroll .el-table__body-wrapper::-webkit-scrollbar {
        width:6px;
    }
    .bueatyScroll .el-table__body-wrapper::-webkit-scrollbar-thumb {
        background-color:#dddddd;
        border-radius: 100px;
    }
    .bueatyScroll .el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
        background-color:#bbb;
    }

    效果:


    这里是利用了webkit内核浏览器的样式

    去掉如上样式中的.bueatyScroll .el-table__body-wrapper就是对整个浏览器中的滚动条生效,看各自需要

    IE浏览器不是webkit内核,所以设置无效
     

    展开全文
  • 在Vue中使用el-table,设置表格高度和宽度后,表格内容超出不显示滚动条。 原因: 内容超出不限时滚动条,可能是因为滚动条为未设置高度和宽度。 解决: 设置滚动条宽度和高度即可。 设置滚动条宽度和高度 /deep/ ....
  • 1、el-table添加滚动条,加上标签: 需要有滚动条的表格 即可,但是以下问题需要注意: (1)其被标签包裹; (2)其父布局,及包含他的所有父布局均需要有高度 2、vxe-table表格下面有页码和页码跳转,其直接显示将...
  • /deep/ .el-table__body-wrapper::-webkit-scrollbar { width: 6px; height: 6px; } /*滚动条滑块*/ /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb { background-color: #ddd; /*border-radius:...
  • 主要是针对有border属性的表格,在显示滚动条时很别扭,做了简单的优化。 原表格
  • ElementUI官方文档提供的table表格的滚动条样式不美观,简单封装之后的效果图 这里使用的是elementui中最基表格 修改样式 .slot::-webkit-scrollbar{ width: 2px; } .slot::-webkit-scrollbar-thumb{ ...
  • el-table class="show_table" border :key="itemKey" :data="shopWindowTable" :header-cell-style="headerStyle" :row-style="{ height: '50px' }" :cell-style="{ padding: '2px' }" ..
  • <include file="Trade:header" /> <style type="text/css" media="screen"> #tradeLeft{ width: 23%; padding: 20px;... /*chrome滚动条颜色设置*/ *::-webkit-scrollbar...
  • el-table-bar-base 自定义element-ui 表格滚动条组件 by Jdes on 2019-02-18 由于 npm 的 OTP 验证问题,原来的 el-table-bar 迁移至 el-table-bar-base 请使用者删除原始包后下载 el-table-bar-base 原有功能...
  • 今天在研究keep-alive页面缓存的时候发现,切换到其他页面再切换回已打开的页面时,el-table表格出现底部还有空白,但是出现了滚动条的问题。查看控制台发现el-table__body-wrapper高度小于el-table的高度。如图: ...
  • el-table组件 <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table-column prop="name" ...
  • .el-table { overflow-x: auto; } .el-table__header-wrapper, .el-table__body-wrapper, .el-table__footer-wrapper { overflow: visible; } .el-table::after { position: relative; } .el-table--scrollable-x...

空空如也

空空如也

1 2 3 4 5 ... 16
收藏数 315
精华内容 126
关键字:

el-table滚动条