關于Element-ui中el-table出現(xiàn)的表格錯位問題解決
前言
在使用element-ui中的el-table時,我們經(jīng)常會用到fiexd屬性,而使用了fixed屬性之后,就會容易在各種場景出現(xiàn)表格錯位的問題。
查閱element-ui官網(wǎng),發(fā)現(xiàn)官網(wǎng)提供了doLayout方法來解決這個問題

總結容易出現(xiàn)錯位問題的幾種場景及解決辦法
1、數(shù)據(jù)更新后出現(xiàn)的錯位問題
1.1 直接在數(shù)據(jù)賦值后執(zhí)行doLayout方法
this.data = data;
// 在數(shù)據(jù)更新后執(zhí)行
this.$nextTick(() => {
// myTable是表格的ref屬性值
if (this.$refs.myTable && this.$refs.myTable.doLayout) {
this.$refs.myTable.doLayout();
}
})1.2在生命周期updated里執(zhí)行doLayout方法
updated() {
// myTable是表格的ref屬性值
if (this.$refs.myTable && this.$refs.myTable.doLayout) {
this.$refs.myTable.doLayout();
}
}2、瀏覽器窗口大小變化時出現(xiàn)的錯位問題
// 綁定window的onresize事件(注意,onresize事件只能有一個)
window.onresize = () => {
// myTable是表格的ref屬性值
if (this.$refs.myTable && this.$refs.myTable.doLayout) {
this.$refs.myTable.doLayout();
}
}3、當有多個Tab標簽時,切換標簽出現(xiàn)的錯位問題
這時可以有多種解決方式
3.1 在組件守衛(wèi)beforeRouteEnter里執(zhí)行doLayout方法
beforeRouteEnter(to, from, next) {
// myTable是表格的ref屬性值
if (this.$refs.myTable && this.$refs.myTable.doLayout) {
this.$refs.myTable.doLayout();
}
//不能忘記這個哦
next();
}3.2 如果使用了keep-alive,可以在activated里執(zhí)行doLayout方法
activated() {
// myTable是表格的ref屬性值
if (this.$refs.myTable && this.$refs.myTable.doLayout) {
this.$refs.myTable.doLayout();
}
}3.3 也可以通過監(jiān)聽路由,在watch里執(zhí)行doLayout方法
watch: {
$route() {
this.$nextTick(() => {
// myTable是表格的ref屬性值
if (this.$refs.myTable && this.$refs.myTable.doLayout) {
this.$refs.myTable.doLayout();
}
})
}
}如果當項目已經(jīng)開發(fā)進入尾聲,此時需要修改大量的文件,而我們可能更希望一次性解決這個問題,這個時候可以在App.vue里找到解決的思路
<template>
<div id="app">
<router-view ref="appView"></router-view>
</div>
</template>
<script>
export default {
data() {
},
watch: {
$route() {
//切換標簽時
this.handleRefreshTable();
}
},
created() {
let _this = this;
//窗口改變時
window.onresize = function () {
_this.handleRefreshTable();
};
},
updated() {
//數(shù)據(jù)改變時
this.handleRefreshTable();
},
methods: {
handleRefreshTable() {
this.$nextTick(() => {
// 獲取頁面中已注冊過ref的所有的子組件。
let refList = this.$refs.appView.$refs;
if (refList) {
for (let i of Object.keys(refList)) {
// 根據(jù)doLayout方法判斷子組件是不是el-table
if (refList[i] && refList[i].doLayout) {
// 執(zhí)行doLayout方法
refList[i].doLayout();
}
}
}
})
}
}
};
</script>附:解決element中el-table中表頭和內(nèi)容錯位的方法
在使用element中table組件的時候,有時候在部分不兼容的瀏覽器中,會出現(xiàn)以下表頭和內(nèi)容錯位的情況。以下提供了兩種解決方案,親測有效果。

方法一:
在第一個el-table-column中加上:key="Math.random()"
<el-table :data="tableData" border>
<el-table-column :key="Math.random()" prop="date" label="日期"> </el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
<el-table-column prop="name" label="姓名"> </el-table-column>
</el-table>
方法二:
在<el-table>上綁定ref='tableRef' ,然后在調(diào)取到數(shù)據(jù)后執(zhí)行以下代碼
this.$nextTick(() => {
this.$refs.tableRef.doLayout()
})
總結
到此這篇關于Element-ui中el-table出現(xiàn)的表格錯位問題解決的文章就介紹到這了,更多相關Element-ui中el-table表格錯位內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
- Vue+EleMentUI實現(xiàn)el-table-colum表格select下拉框可編輯功能實例
- vue element-ui實現(xiàn)el-table表格多選以及回顯方式
- el-element中el-table表格嵌套el-select實現(xiàn)動態(tài)選擇對應值功能
- element el-table表格的二次封裝實現(xiàn)(附表格高度自適應)
- VUE2.0+ElementUI2.0表格el-table實現(xiàn)表頭擴展el-tooltip
- VUE2.0+ElementUI2.0表格el-table循環(huán)動態(tài)列渲染的寫法詳解
- VUE2.0 ElementUI2.0表格el-table自適應高度的實現(xiàn)方法
- Element el-table 表格使用詳解
相關文章
在Vue中延遲執(zhí)行某個函數(shù)的實現(xiàn)方式
在Vue中延遲執(zhí)行某個函數(shù),你可以使用setTimeout()函數(shù)或者Vue提供的生命周期鉤子函數(shù),本文通過一些示例代碼給大家介紹的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下2023-12-12
解決ant-design-vue中menu菜單無法默認展開的問題
這篇文章主要介紹了解決ant-design-vue中menu菜單無法默認展開的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10

