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的功能都是兼容的
  • 相关阅读:
    常用源代码管理工具与开发工具
    项目发布
    学期总结
    个人博客
    个人博客
    阅读笔记6
    阅读笔记5
    阅读笔记4
    团队代码
    团队代码
  • 原文地址:https://www.cnblogs.com/sixrookie/p/14777274.html
Copyright © 2011-2022 走看看