el-table 固定列錯位的問題
問題描述
給el-table表個的操作列設置了固定,即fixed:right,出現了操作列高度與其他列高度不統(tǒng)一 ,導致行錯位的情況,如下圖:
并且即便重新渲染表格,也無法解決該問題
問題分析
1.將出操作列以外的其他列的代碼都注釋,會看到表格變成下圖:
可以看到左側一列沒有內容的表格列,可以理解為這是固定的操作列在正常布局的投影,正是它在影響正常布局表格每一行的行高。
里面雖然看上去沒有內容,實際上還是有三個看不見的按鈕;并且這三個按鈕的布局與固定的操作列有所不同,發(fā)生了換行,導致了第一行的行高變高
導致這種布局不同的最終原因是因為,投影列里的按鈕有一個margin-left屬性,而操作列則沒有。
問題解決
對于我個人來說,解決方法如下文章來源:http://www.zghlxwxcb.cn/news/detail-606823.html
/deep/.el-button + .el-button {
margin-left: 0px;
}
總結
每個人造成錯位的原因可能不同,但是背后的原因都是投影列與固定列的樣式不同導致了實際渲染出來的效果和預想效果出現了偏差,而解決方法都一樣,即統(tǒng)一投影列與固定列的樣式。文章來源地址http://www.zghlxwxcb.cn/news/detail-606823.html
到了這里,關于el-table 固定列錯位的問題的文章就介紹完了。如果您還想了解更多內容,請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章,希望大家以后多多支持TOY模板網!