Element-ui的table中使用fixed后出現行混亂

話不多說，先看看問題是什么

我們看到table左側fixed的區(qū)域并沒有延伸到表格底部，之前在用戶拖拽表格時添加了方法this.$refs.headGroupTable.doLayout()來重置表格（headGroupTable是自定義組件名稱，學過vue的都懂），但是在數據拿到后使用此方法并不能解決以上問題

解決方法

其實解決方法也很簡單，我們打開瀏覽器看到fiexed的表格區(qū)域樣式的高度是固定的px，這是我只需要添加一下代碼即可

.el-table__fixed {
  height: 100%!important;
}

其實這里我想告訴大家，解決問題的方法不難找出，很多種方案都可實現，比如還可以使用jq、元素js等等都可以解決以上問題，當然我只是把最簡單暴力的貼出來了，溫馨提示下，這個樣式不建議全局修改，你可以寫成局部樣式，部分組件生效

使用element-ui table組件 fixed 布局錯位 問題原因解決

問題

使用element-ui table表格布局，頭尾列fiexd時，在chrome，火狐，edg瀏覽器上布局正常，但是在國產瀏覽器,qq瀏覽器，UC瀏覽器，360瀏覽器上布局錯亂。

原因

因為chrome正常，所以懷疑是國產瀏覽器的chrome內核版本問題，就查看了一下，qq瀏覽器是70，uc瀏覽器55，360是65，而edg瀏覽器和chrome瀏覽器內核版本均是92。

造成的直接原因其實已經找到了，就是國產瀏覽器chrome內核版本低，而element-ui在低版本chrome內核上沒有做兼容。

解決

直接原因知道了，但是怎么解決？

習慣性百度了一下，果然有很多網友也遇到同樣的問題，提供的方案也多種，其中說的最多的是調用element-ui table組件的doLayout方法，重新刷新布局。

然并卵，試了網友的多種方法均無效！

那只能嘗試另辟蹊徑。于是查看了其他頁面，發(fā)現項目里面的用戶列表頁面同樣有換行，但是沒有錯亂。

既然有不一致，那就對比兩個頁面，發(fā)現其實沒多大差異，所以智能來笨辦法。

將有問題的列表的el-table-column注釋，看頁面反應。

首先將使用了 的el-table-column注釋，結果返現，當吧含有組件file-view-list （一個文件預覽組件） 的el-table-column注釋后，頁面竟然正常了??！

那就是file-view-list組件有問題，于是找到file-view-list組件里面，注釋里面的樣式，后面終于找到了影響頁面布局的css，竟然是一個多行省略樣式，scss的混合。

//多行省略
@mixin textMultiLineEllipsis($clamp:1){
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: $clamp;
  -webkit-box-orient: vertical;
}

具體為何影響的深層次原因目前尚不清楚，但是后面換了種寫法就好了，換成單行省略的寫法

//省略號
@mixin textEllipsis ($width) {
  max-width: $width;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}

不過深層次原因還沒有找到。

總結

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論