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