zoukankan      html  css  js  c++  java
  • elementUI table fixed

    element中的table表格功能是非常好用的一款功能,但是在实际使用中发现了两个问题:

    1、table开启fixed功能后底部滚动条被覆盖:

     

    2、table开启fixed功能后,上下滚动行无法对齐

    如图所示:

    针对问题1的解决方案有两个:

    1、在公共样式中设置:

    .el-table__fixed{
      height: auto !important; // 让固定列的高自适应,且设置!important覆盖ele-ui的默认样式
    }
    2、在数据初始化的时候修改el-table__fixed高度:
    注意:此处需要使用setTimeout不能使用this.$nextTick,因为需要等el把样式全部处理完成后才能进行修改,不然会被el覆盖掉( 具体原因可以参考宏任务与微任务 )
    setTimeout(() => {
          $(".el-table__fixed").css({ height: '当前table高度' - '滚动条高度' });
     });
     
    针对问题2的解决方案也有两个:
    1、修改源码,这个不用说,可以直接修改elementUI的源码进行处理
    2、使用一个基于elementUI的table插件进行样式方面的处理,我这块使用的是 ElBigdataTable 这款插件进行处理的,这款插件基于elementUI进行的二次开发,使其table兼容大数据,引用进来后只需要把el-table改为ElBigdataTable就可以了,因为是基于element的二次开发所以对table的功能都是兼容的
  • 相关阅读:
    图解测试之稳定性-如何开始稳定性测试
    系统稳定性保障
    系统稳定性评测
    分布式架构的架构稳定性
    app测试--稳定性测试
    服务器稳定性测试方法汇总
    服务端稳定性测试
    发票问题
    android x86 固件定制
    Nim游戏博弈(收集完全版)
  • 原文地址:https://www.cnblogs.com/sixrookie/p/14777274.html
Copyright © 2011-2022 走看看