Vue中el-table追加行后固定列滚动错位问题

一、问题描述

偶然发现一个问题，但是并没有找到解决方案，自己调试了两个多小时终于解决。

先贴出问题

业务描述：在已查询完全部的符合条件的数据后，表格最下方提示“没有更多数据”
使用solt = “append” 追加div
这时候滑动到最底部，固定列错位了。

二、解决思路

vue中的表格是封装起来的，包括里面的方法，例如我们常用的固定列。所以可以从查看页面elements属性开始，找到fixed组成部分。
可以看到fixed列其实在页面上也是一个表格，那么需要确认fixed表格是否有我们append的内容or占位符

三、解决方案

这时候可以留意 .el-table__append-gutter 属性，这就是append那一行的div占位符（追加的主体在主表格中），但是可以看到这个属性的height属性为0px。将这里的height属性设置成需要的即可

在 style 中追加：

 <style lang="scss" scoped>.el-table > > > .el-table__append-gutter{height:30px !important;}</style>

四、后记

总结起来好像这个问题比较简单，但是由于之前不知道fixed列其实也是一个表格，一度认为是fixed列高问题，或者是追加的div样式问题，绕了不少弯路。看来前端还真是一步步踩坑一步步前进的，加油！

Vue中el-table追加行后固定列滚动错位问题相关推荐

Vue中对Table表格中的输入项进行校验
项目开发中,经常会遇到的场景:对table表格的输入项字段进行校验,同时提交时整体校验. 这个坑真的爬了好久,几个需求做完了,校验也没实现,挫败!后来看到一个博主Element UI from实现校验 ...
周末杂谈：在MYSQL中，添加数据行后，使用右外连接查询所有课程的选修情况，要求列出课程编号、课程名称、选修人数，表中没有的课程列值为空的解决方法
周末杂谈:在MYSQL中,添加数据行后,使用右外连接查询所有课程的选修情况,要求列出课程编号.课程名称.选修人数,表中没有的课程列值为空的解决方法实验前期准备 course表(课程表) 在其中: c ...
html设置表格行高和列宽,怎么在腾讯文档中设置表格的行高和列宽
摘要腾兴网为您分享:怎么在腾讯文档中设置表格的行高和列宽,云集,虚拟机,我的世界,卫星云图等软件知识,以及cad2009,kmp,mt4,usb转串口驱动,wifi吸粉,csgo动态组名,亿方云,单 ...
Java黑皮书课后题第8章：*8.13（定位最大的元素）编写下面的方法，返回二维数组中最大元素的位置。返回值是包含两个元素的一维数组，这两个元素表示二维数组中最大元素的行下标和列下标
*8.13(定位最大的元素)编写下面的方法,返回二维数组中最大元素的位置.返回值是包含两个元素的一维数组,这两个元素表示二维数组中最大元素的行下标和列下标题目题目描述与运行示例破题代码题目 ...
word中，解决插入形状后固定位置不变。
在office上的word中,如果插入形状后,默认"对象随文字移动".当出现文字或者图片的格式出现更换,该形状就会随着变化位置.或者将word转换为PDF格式后,形状也会出现位置变 ...
el-table中设置fixed固定列之后错位的奇葩原因
场景 ElementUI中el-table设置指定列固定不动,不受滚动条影响: ElementUI中el-table设置指定列固定不动,不受滚动条影响_BADAO_LIUMANG_QIZHI的博客-C ...
原型设计中展示数据的“行模式”与“列模式”的选择
在原型设计中的一点点思考与总结: 界面中操作数据"行模式"还是"列模式",所谓"行模式"即将被操作的对象每个作为一行,而"列模式& ...
vue中使用iview一个数据分成两列渲染（render,竖列，左右不同数据）
我在项目中有一个需求是下面这样的样式开始的思路是使用iview中的table的columns,给表头数据数据使用render渲染不同的数据(如下) {title: '旧版本',key: 'name' ...
iview table组件里的固定列表格不自适应问题
当在使用iview Table组件里固定列功能时出现表格不自适应宽度问题具体如下解决这个bug 很简单把组件里的 width 改为 minWidth 即可 columns: [{title: ...