VUE表格顯示錯位的兩種解決思路分享
更新時間：2023年10月19日 14:16:01 作者：Sheen-
這篇文章主要介紹了VUE表格顯示錯位的兩種解決思路,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
VUE表格顯示錯位的兩種解決思路
現(xiàn)在在寫的一個項目出現(xiàn)了表格顯示錯位的問題，如圖所示，雖然不影響功能，刷新一下就沒了，但是還是挺影響美觀的。
可以看見圖中有兩個錯位問題，第一個是滾動條沒有在正常的位置，第二個是第一行數(shù)據(jù)中左右fixed的部分出現(xiàn)在了表格中間。
第一個思路
當然是使用dolayout（）
我在調(diào)用數(shù)據(jù)接口之后和在watch里都加了dolayout（）函數(shù)
watch: {
List: {//這里是表格的名字
// 解決表格顯示錯位問題
handler () {
this.$nextTick(() => {
this.$refs.el_table.doLayout()
})
},
deep: true
}這個方法對大部分情況適用，但并沒有解決我的問題。
第二個思路
可以看見錯位的滾動條所在叫做 .el-table__body-wrapper
對比可以發(fā)現(xiàn)，正常時的 .el-table__body-wrapper的height應該是520px，而錯位時height是406px，整個table的height是570px。
解決方法
所以一種方便快速永訣后患的思路就是在css里直接規(guī)定.el-table__body-wrapper的height，當然這里有一點要注意，要在前面加一個/deep/，因為這個元素是一個深層元素。
/deep/ .el-table__body-wrapper{
height: 91.40% !important;
}我直接將它的高度設(shè)定為表格高度的90%左右
固定列顯示錯位也是同樣的思路
/deep/ .el-table__fixed-body-wrapper{
height: 91.22% !important;
}總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要介紹了vue2實現(xiàn)傳送門效果的示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-04-04
使用Vue Composition API寫出清晰、可擴展的表單實現(xiàn)
這篇文章主要介紹了使用Vue Composition API寫出清晰、可擴展的表單實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-06-06
這篇文章主要為大家詳細介紹了Vue中自定義指令directive的使用方法，文中的示例代碼講解詳細，感興趣的小伙伴可以跟隨小編一起學習一下2023-04-04
van-uploader保存文件到后端回顯后端接口返回的數(shù)據(jù)
前端開發(fā)想省時間就是要找框架呀,下面這篇文章主要給大家介紹了關(guān)于van-uploader保存文件到后端回顯后端接口返回的數(shù)據(jù),文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-06-06
在Vue3.5版本中,響應式Props的解構(gòu)功能正式轉(zhuǎn)正,該功能允許即使在解構(gòu)后也不丟失響應性,文通過編譯階段的處理,如何保持解構(gòu)后的props變量仍保持響應性,編譯過程中的defineProps宏函數(shù)處理,通過AST和上下文操作實現(xiàn)變量替換,從而讓解構(gòu)后的變量在運行時維持響應式狀態(tài)2024-09-09
本文主要介紹了在vue3中使用jsx的配置以及一些小問題，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
Vue 微信端掃描二維碼蘋果端卻只能保存圖片問題(解決方法)
這幾天在做項目時遇到微信掃描二維碼的然后進入公眾號網(wǎng)頁巴拉巴拉的，然后就很順利的遇到了在安卓端掃碼的時候，順利的一塌糊涂，然后到了蘋果端的時候，就只能出現(xiàn)一個保存圖片，然后就寫一下記錄一下這問題的解決方法2020-01-01
這篇文章主要為大家詳細介紹了利用vue的監(jiān)聽事件實現(xiàn)一個簡單購物車，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-04-04
Vue項目的網(wǎng)絡(luò)請求代理到封裝步驟詳解
這篇文章主要介紹了Vue項目的網(wǎng)絡(luò)請求代理到封裝步驟,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
本文主要介紹了Element中Select選擇器的實現(xiàn)，文中根據(jù)實例編碼詳細介紹的十分詳盡，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03