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