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

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样式问题，绕了不少弯路。看来前端还真是一步步踩坑一步步前进的，加油！