element table滚动条固定视图底部

66 阅读 0 评论 44 点赞

我是靠谱客的博主乐观战斗机，最近开发中收集的这篇文章主要介绍element table滚动条固定视图底部，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

问题：

使用elementui做表格的时候，发现内容超出浏览器宽度，table出现滚动条，但是滚动条一直固定在表格最下面，查看右边需要滚动到底部再拉动横向滚动条，所以固定横向滚动条在页面底部。

解决方案：

//1.css控制
//2. 自制滚动条（未完成

html:

<div class="taberContainer" @contextmenu.prevent.capture>
      <el-table :data="excelData" tooltip-effect="dark" border class="tabercontainer_taber">
      </el-table>
</div>

css:

  .taberContainer {
    position: absolute;
    overflow: auto;
    padding: 5px 20px 20px 20px;
  }
   .taberContainer .el-table.el-table {
    position: relative;
    min-width: 1300px;
    overflow: auto;
  }