el-table 固定列错位的问题

el-table 固定列错位的问题

问题描述

给el-table表个的操作列设置了固定，即fixed：right，出现了操作列高度与其他列高度不统一 ，导致行错位的情况，如下图：
并且即便重新渲染表格，也无法解决该问题

问题分析

1.将出操作列以外的其他列的代码都注释，会看到表格变成下图：

可以看到左侧一列没有内容的表格列，可以理解为这是固定的操作列在正常布局的投影，正是它在影响正常布局表格每一行的行高。

里面虽然看上去没有内容，实际上还是有三个看不见的按钮；并且这三个按钮的布局与固定的操作列有所不同，发生了换行，导致了第一行的行高变高

导致这种布局不同的最终原因是因为，投影列里的按钮有一个margin-left属性，而操作列则没有。

问题解决

对于我个人来说，解决方法如下

/deep/.el-button + .el-button {
    margin-left: 0px;
  }

总结

每个人造成错位的原因可能不同，但是背后的原因都是投影列与固定列的样式不同导致了实际渲染出来的效果和预想效果出现了偏差，而解决方法都一样，即统一投影列与固定列的样式。