elementUI表格動態渲染錯亂

問題:

表格設置固定高度,表格內容超過高度,表格出現滾動,但是表格滾動部分高度偏小(比表格高度減去表格頭小)。表格左側第一列固定左側,橫向出現滾動,表格橫向出現錯位。不固定出現,頻率有時高、有時低。

環境:

vue: 2.6.6 element-ui: 2.10.1 請求接口動態渲染表格頭和表格內容

分析:

一開始會想是項目中樣式衝突導致錯亂,頁面切換加審查一番元素之後會發現並不是。標籤帶有class名爲el-table__body-wrapper,設置行內樣式高度偏小,導致表格未能達到設置高度,出現空白錯位區。豎列固定後的行錯位也是同樣問題,都是elementUI的表格計算高度不是在渲染之後導致的。問題關鍵就是在表格渲染完成之後重新佈局表格。elementUI文檔中有方法doLayout重新佈局表格。

this.$nextTick(()=>{
	this.$refs.tableRef.doLayout()
})
// table的ref爲tableRef,更新渲染表格的數據後執行上面代碼
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章