背景：使用el-tabe设置右侧固定列 fixed="right"，没有设置表格固定高，数据过多时滚动table会出现如下情况：

代码如下：

<el-table :data="data" max-height="calc(100vh - 100px)" style="width:100%;overflow-y:auto"><el-table-column fixed="right" label="操作" width="70" align="center"></el-table-column>
</el-table>

原因：

查阅源码后发现是calc(100vh - 100px）导致的。代码虽然设置了max-height属性，也出现了滚动条。实际上是table上设置的style:overflow-y:auto 假象的以为是max-height生效了。overflow-y:auto只是让table出现滚动条，但并不是el-table的header固定下面列表滚动的效果。查看了源码发现max-height也只是生效了class名为el-table这一层dom，但是“el-table__body-wrapper”这层元素的max-height样式是对max-height这个字段进行处理后设置，因为解析不了calc(100vh - 100px），所以没有设置成功。

源码：

el-table这一层dom的源码

el-table__body-wrapper这一层dom的源码

解决方法：

只能把maxHeight设置成数字，再使用window.onresize方法监听改maxHeight属性

data() {return {tableData: [],maxHeight: window.innerHeight - 125 // table高度}},mounted() {window.onresize = () => {this.maxHeight = window.innerHeight - 125}},

Element - table固定列页面数据过多滚动时显示问题相关推荐

Vue Element table表格实现表格数据动态滚动（无限滚动）
效果 QQ录屏绑定鼠标事件 (实现鼠标进入和出去的时候数据是否滚动)(也可以不写,看自己需求) 滚动方法 :
小程序背景图固定以及标题栏遮挡内容滚动时显示内容
滚动页面时背景图固定: 采用一张图片作为背景图,通过设置position为fixed以及z-index为-1,目的是为了让它在最底层.  <view>& ...
Element table 导出Excel重复数据
一.说明使用Element组件的table实现固定列时,在前端页面导出table数据为Excel时,可以使用xlsx插件或bootstrap-table插件时,导出的数据会出现两份一样的数据. 二. ...
element table固定表头，表的高度自适应解决方法
element table固定表头,表的高度自适应解决方法参考文章: (1)element table固定表头,表的高度自适应解决方法 (2)https://www.cnblogs.com/muou ...
解决更新页面数据回显时时间不匹配问题：The specified value “Fri Nov 05 08:00:00 CST 2021“ does not conform to the requir
解决更新页面数据回显时时间不匹配问题我们输入时间数据回显,但是页面时间并没有显示时间没有回显效果图客户端控制台提示信息: The specified value "Fri Nov 05 ...
nwjs解决页面透明化，启动时显示白屏的问题
nwjs解决页面透明化,启动时显示白屏的问题参考文章: (1)nwjs解决页面透明化,启动时显示白屏的问题 (2)https://www.cnblogs.com/jinling/p/6068918. ...
html表格横向竖向滚动,利用纯css实现table固定列与表头中间横向滚动的思路和实例...
前言最近在做的后台管理系统要处理大量的表格,因为原项目是采用的for循环加拼接字符串的方式实现;导致js代码一大堆;各种单引号和双引号的嵌套;让人头疼;遂引入vue.js;用v-for做模板渲染;工 ...
解决elementui table固定列的时候，滚动条被遮挡无法拖动的问题
当我们使用element table,有时我们需要部分的列固定,我们就给列添加了 fxied属性,但是这时候你会发现table的横向滚动条根本拖不动,只能在固定列外面靠点击来让它过来. 查找原因你会 ...
table固定列html5,css+js简单实现table固定首行首列
说明: 使用easyui等都可以实现table固定首行首列的功能. 但仅仅只需要这一个功能,完全可以用css+js简单实现而不用引入更多工具. 网上找到很多的思路,自己对其中比较简单的一个进行了整理. ...

Element - table固定列页面数据过多滚动时显示问题

背景：使用el-tabe设置右侧固定列 fixed="right"，没有设置表格固定高，数据过多时滚动table会出现如下情况：

原因：

源码：

解决方法：

Element - table固定列页面数据过多滚动时显示问题相关推荐

最新文章

热门文章