VUE表格顯示錯(cuò)位的兩種解決思路分享
VUE表格顯示錯(cuò)位的兩種解決思路
現(xiàn)在在寫的一個(gè)項(xiàng)目出現(xiàn)了表格顯示錯(cuò)位的問題，如圖所示，雖然不影響功能，刷新一下就沒了，但是還是挺影響美觀的。
可以看見圖中有兩個(gè)錯(cuò)位問題，第一個(gè)是滾動(dòng)條沒有在正常的位置，第二個(gè)是第一行數(shù)據(jù)中左右fixed的部分出現(xiàn)在了表格中間。
第一個(gè)思路
當(dāng)然是使用dolayout（）
我在調(diào)用數(shù)據(jù)接口之后和在watch里都加了dolayout（）函數(shù)
watch: {
List: {//這里是表格的名字
// 解決表格顯示錯(cuò)位問題
handler () {
this.$nextTick(() => {
this.$refs.el_table.doLayout()
})
},
deep: true
}這個(gè)方法對(duì)大部分情況適用，但并沒有解決我的問題。
第二個(gè)思路
可以看見錯(cuò)位的滾動(dòng)條所在叫做 .el-table__body-wrapper
對(duì)比可以發(fā)現(xiàn)，正常時(shí)的 .el-table__body-wrapper的height應(yīng)該是520px，而錯(cuò)位時(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%左右
固定列顯示錯(cuò)位也是同樣的思路
/deep/ .el-table__fixed-body-wrapper{
height: 91.22% !important;
}總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue下history模式刷新后404錯(cuò)誤解決方法
這篇文章主要介紹了vue下history模式刷新后404錯(cuò)誤解決方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
vue計(jì)算屬性computed--getter和setter用法
這篇文章主要介紹了vue計(jì)算屬性computed--getter和setter用法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了vue3繼承并擴(kuò)展三方組件完成二次封裝,文章使用naiveui的Input組件進(jìn)行舉例,elementPlus或者其他組件庫同理,并通過代碼示例講解的非常詳細(xì),需要的朋友可以參考下2024-03-03
這篇文章主要介紹了在Vue中使用Echarts++封裝,需要的朋友可以參考下2023-11-11
在vue項(xiàng)目中引入vue-beauty操作方法
在本篇文章里小編給大家分享了關(guān)于在vue項(xiàng)目中引入vue-beauty操作方法，有需要的朋友們跟著學(xué)習(xí)參考下。2019-02-02
vue3+vite中開發(fā)環(huán)境與生產(chǎn)環(huán)境全局變量配置指南
最近在使用vite生成項(xiàng)目,這篇文章主要給大家介紹了關(guān)于vue3+vite中開發(fā)環(huán)境與生產(chǎn)環(huán)境全局變量配置的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
這篇文章主要介紹了vue3.0實(shí)現(xiàn)插件封裝的方法，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
這篇文章主要介紹了Vue.js之VNode的使用，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
webpack+vue-cil 中proxyTable配置接口地址代理操作
這篇文章主要介紹了webpack+vue-cil 中proxyTable配置接口地址代理操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
虛擬DOM是一種用JavaScript對(duì)象來描述真實(shí)DOM的技術(shù),通過diff算法實(shí)現(xiàn)高效的DOM更新,提高頁面性能,Vue通過render函數(shù)和VNode實(shí)現(xiàn)虛擬DOM,結(jié)合diff算法減少DOM操作,提升用戶體驗(yàn)2024-12-12