elementUI的table表格表頭錯位問題解決

更新（2019/11/20）：據網友（nchencc）提供的方法，隻需要在App.vue的style裡添加以下樣式即可！

.el-table--border th.gutter:last-of-type {

    display: block!important;

    width: 17px!important;

}

如以上解決不了的再往下看↓

一、出現問題：

在vue項目中引入elementUI的table元件，當将表格的頭部和列固定後就會出現表頭與内容錯位的問題。如下圖：

二、解決方法：

在遇到該問題時，我百度了解決方法，差不多都是添加css樣式覆寫，但用在我的項目中是沒能解決的。後來秉着解決問題和優化使用者體驗的耐心，逐漸去排查。後來排查找到當拖動浏覽器頁面後發現表頭就不再錯位。是以按我所知，這很有可能是渲染前後的問題，在我能力不足去修改elementUI元件的同時，我用了個土方法解決該問題，雖然很蹩腳，但也算是解決方法的一種。

在el-table元件挂載一個ref="configurationTable"，然後在每次請求資料成功後動一動表格的預設寬度

this.$refs.configurationTable.$el.style.width = '99.99%' （如果99.99%不行，可以将值設定小一點試試）

三、建議意見：

該解決方法很蹩腳，如果大家以後有更好的解決方法，還望告知。非常感謝~

————————————————

版權聲明：本文為CSDN部落客「NewDayStudy」的原創文章，遵循CC 4.0 BY-SA版權協定，轉載請附上原文出處連結及本聲明。

原文連結：https://blog.csdn.net/NewDayStudy/article/details/97887917