el-table 固定列错位的问题
问题描述
给el-table表个的操作列设置了固定,即fixed:right,出现了操作列高度与其他列高度不统一 ,导致行错位的情况,如下图:
并且即便重新渲染表格,也无法解决该问题
问题分析
1.将出操作列以外的其他列的代码都注释,会看到表格变成下图:
可以看到左侧一列没有内容的表格列,可以理解为这是固定的操作列在正常布局的投影,正是它在影响正常布局表格每一行的行高。
里面虽然看上去没有内容,实际上还是有三个看不见的按钮;并且这三个按钮的布局与固定的操作列有所不同,发生了换行,导致了第一行的行高变高
导致这种布局不同的最终原因是因为,投影列里的按钮有一个margin-left属性,而操作列则没有。
问题解决
对于我个人来说,解决方法如下文章来源:https://www.toymoban.com/news/detail-606823.html
/deep/.el-button + .el-button {
margin-left: 0px;
}
总结
每个人造成错位的原因可能不同,但是背后的原因都是投影列与固定列的样式不同导致了实际渲染出来的效果和预想效果出现了偏差,而解决方法都一样,即统一投影列与固定列的样式。文章来源地址https://www.toymoban.com/news/detail-606823.html
到了这里,关于el-table 固定列错位的问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!