快捷導(dǎo)航

Element-ui的table中使用fixed后出現(xiàn)行混亂情況的解決

更新時(shí)間：2023年10月20日 08:45:17 作者：尼古拉斯二嘎

這篇文章主要介紹了Element-ui的table中使用fixed后出現(xiàn)行混亂情況的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

Element-ui的table中使用fixed后出現(xiàn)行混亂

話不多說(shuō)，先看看問(wèn)題是什么

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

解決方法

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

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

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

使用element-ui table組件 fixed 布局錯(cuò)位問(wèn)題原因解決

問(wèn)題

使用element-ui table表格布局，頭尾列fiexd時(shí)，在chrome，火狐，edg瀏覽器上布局正常，但是在國(guó)產(chǎn)瀏覽器,qq瀏覽器，UC瀏覽器，360瀏覽器上布局錯(cuò)亂。

原因

因?yàn)閏hrome正常，所以懷疑是國(guó)產(chǎn)瀏覽器的chrome內(nèi)核版本問(wèn)題，就查看了一下，qq瀏覽器是70，uc瀏覽器55，360是65，而edg瀏覽器和chrome瀏覽器內(nèi)核版本均是92。

造成的直接原因其實(shí)已經(jīng)找到了，就是國(guó)產(chǎn)瀏覽器chrome內(nèi)核版本低，而element-ui在低版本chrome內(nèi)核上沒(méi)有做兼容。

解決

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

習(xí)慣性百度了一下，果然有很多網(wǎng)友也遇到同樣的問(wèn)題，提供的方案也多種，其中說(shuō)的最多的是調(diào)用element-ui table組件的doLayout方法，重新刷新布局。

然并卵，試了網(wǎng)友的多種方法均無(wú)效！

那只能嘗試另辟蹊徑。于是查看了其他頁(yè)面，發(fā)現(xiàn)項(xiàng)目里面的用戶列表頁(yè)面同樣有換行，但是沒(méi)有錯(cuò)亂。

既然有不一致，那就對(duì)比兩個(gè)頁(yè)面，發(fā)現(xiàn)其實(shí)沒(méi)多大差異，所以智能來(lái)笨辦法。

將有問(wèn)題的列表的el-table-column注釋，看頁(yè)面反應(yīng)。

首先將使用了的el-table-column注釋，結(jié)果返現(xiàn)，當(dāng)吧含有組件file-view-list （一個(gè)文件預(yù)覽組件）的el-table-column注釋后，頁(yè)面竟然正常了！！

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

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

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

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

不過(guò)深層次原因還沒(méi)有找到。