ElementUI表格錯位修復心得分享
問題如圖
點擊勾選右側字段 顯示/隱藏，會導致左側出現(xiàn)表格樣式錯亂問題
分析
分析問題：列顯示/隱藏后，Element UI 表格未重新計算布局，導致樣式錯亂。
修復 CRUD.operation.vue 中的 updateColumnVisible，在列變更后強制表格重新布局。
解決方法
關鍵代碼
// 強制表格重新計算布局，修復列顯示/隱藏后的樣式錯亂問題
this.$nextTick(() => {
if (table && typeof table.doLayout === 'function') {
table.doLayout();
}
});
使用了doLayout方法之后，基本就可以解決常見的錯位問題了，如果情況特殊$nextTick不起作用，用setTimeout試一下即可。
修改后直接更新，讓現(xiàn)場人員測試，結果！ 發(fā)現(xiàn)了一個很奇葩的問題
奇葩錯位
在el-tabs里已經doLayout處理過的table，在右邊勾選 字段顯示/隱藏，當表格只剩下2-3個字段的時候，又錯位了。
現(xiàn)象
庫位這一列，數(shù)據(jù)一行展示的時候，左側會出現(xiàn)錯位現(xiàn)象
庫位這一列，數(shù)據(jù)多行展示的時候，不會出現(xiàn)錯位現(xiàn)象
思考
在動態(tài)控制字段顯示/隱藏的監(jiān)聽事件里再執(zhí)行一次doLayout不就完了么，現(xiàn)實是，無效果。還是沒有解決問題
經過多方面的測試，最終發(fā)現(xiàn)罪魁禍首就是
<el-table-column
prop="posName"
:sortable="true"
:label="$t('NeoLight.storageNo')"
width="100" />里邊的這個width值！
解決el-table里所有錯位問題的方法，其實就是，使用min-width，根據(jù)label值的長度調整min-width，min-width過小就會導致各種奇葩的錯位，
例如上邊這個庫位的label，width="100"就會出現(xiàn)錯位現(xiàn)象，設為min-width：100就沒有問題了。
<el-table-column
prop="posName"
:sortable="true"
:label="$t('NeoLight.storageNo')"
min-width="100" />總結
根據(jù)表頭文字長度、給有min-width的列設置合適的值，錯位問題就解決了。
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
vue+Element中table表格實現(xiàn)可編輯(select下拉框)
這篇文章主要介紹了vue+Element中table表格實現(xiàn)可編輯，實現(xiàn)select下拉框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
vue cli3 實現(xiàn)分環(huán)境打包的步驟
這篇文章主要介紹了vue cli3 實現(xiàn)分環(huán)境打包的步驟，本文通過圖文并茂的形式給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-03-03
Vuex 是一個專為 Vue.js 應用程序開發(fā)的狀態(tài)管理模式。通過本文給大家分享vuex 漸進式教程實例代碼，從入門級帶你慢慢深入使用vuex，感興趣的朋友一起看看吧2018-11-11
這篇文章主要為大家詳細介紹了vue.js中使用mint-ui框架的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
Vue Cli3 打包配置并自動忽略console.log語句的方法
這篇文章主要介紹了Vue Cli3 打包配置并自動忽略console.log語句的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-04-04
這篇文章主要介紹了vue中的row布局靠右對齊,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
給大家?guī)硪黄P于用nodejs實現(xiàn)excel文件的讀取并去重的功能，有興趣的朋友參考學習下。2018-04-04
這篇文章主要介紹了vite項目如何集成eslint和prettier問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
vue-quill-editor+plupload富文本編輯器實例詳解
這篇文章主要介紹了vue-quill-editor+plupload富文本編輯器實例詳解,需要的朋友可以參考下2018-10-10
element-ui?form表單的動態(tài)rules校驗功能實現(xiàn)
在vue項目中，有時候可能會用到element-ui?form表單的動態(tài)rules校驗，這篇文章主要介紹了element-ui form表單的動態(tài)rules校驗,我們可以巧妙的運用element-ui form表單里面form-item的校驗規(guī)則來處理，本文結合實例代碼介紹的非常詳細，需要的朋友可以參考下2023-07-07