關(guān)于Element-ui中el-table出現(xiàn)的表格錯(cuò)位問題解決
更新時(shí)間：2022年07月22日 12:24:00 作者：卿本無憂
使用ElementUI的el-table后,偶然發(fā)現(xiàn)出現(xiàn)行列錯(cuò)位、對(duì)不齊問題,下面這篇文章主要給大家介紹了關(guān)于Element-ui中el-table出現(xiàn)的表格錯(cuò)位問題解決的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
前言
在使用element-ui中的el-table時(shí)，我們經(jīng)常會(huì)用到fiexd屬性，而使用了fixed屬性之后，就會(huì)容易在各種場(chǎng)景出現(xiàn)表格錯(cuò)位的問題。
查閱element-ui官網(wǎng)，發(fā)現(xiàn)官網(wǎng)提供了doLayout方法來解決這個(gè)問題
總結(jié)容易出現(xiàn)錯(cuò)位問題的幾種場(chǎng)景及解決辦法
1、數(shù)據(jù)更新后出現(xiàn)的錯(cuò)位問題
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、瀏覽器窗口大小變化時(shí)出現(xiàn)的錯(cuò)位問題
// 綁定window的onresize事件（注意，onresize事件只能有一個(gè)）
window.onresize = () => {
// myTable是表格的ref屬性值
if (this.$refs.myTable && this.$refs.myTable.doLayout) {
this.$refs.myTable.doLayout();
}
}3、當(dāng)有多個(gè)Tab標(biāo)簽時(shí)，切換標(biāo)簽出現(xiàn)的錯(cuò)位問題
這時(shí)可以有多種解決方式
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();
}
//不能忘記這個(gè)哦
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();
}
})
}
}如果當(dāng)項(xiàng)目已經(jīng)開發(fā)進(jìn)入尾聲，此時(shí)需要修改大量的文件，而我們可能更希望一次性解決這個(gè)問題，這個(gè)時(shí)候可以在App.vue里找到解決的思路
<template>
<div id="app">
<router-view ref="appView"></router-view>
</div>
</template>
<script>
export default {
data() {
},
watch: {
$route() {
//切換標(biāo)簽時(shí)
this.handleRefreshTable();
}
},
created() {
let _this = this;
//窗口改變時(shí)
window.onresize = function () {
_this.handleRefreshTable();
};
},
updated() {
//數(shù)據(jù)改變時(shí)
this.handleRefreshTable();
},
methods: {
handleRefreshTable() {
this.$nextTick(() => {
// 獲取頁面中已注冊(cè)過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)容錯(cuò)位的方法
在使用element中table組件的時(shí)候，有時(shí)候在部分不兼容的瀏覽器中，會(huì)出現(xiàn)以下表頭和內(nèi)容錯(cuò)位的情況。以下提供了兩種解決方案，親測(cè)有效果。
方法一：
在第一個(gè)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()
})
總結(jié)
到此這篇關(guān)于Element-ui中el-table出現(xiàn)的表格錯(cuò)位問題解決的文章就介紹到這了,更多相關(guān)Element-ui中el-table表格錯(cuò)位內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
- element表格el-table實(shí)現(xiàn)虛擬滾動(dòng)解決卡頓問題
- Vue+EleMentUI實(shí)現(xiàn)el-table-colum表格select下拉框可編輯功能實(shí)例
- vue element-ui實(shí)現(xiàn)el-table表格多選以及回顯方式
- el-element中el-table表格嵌套el-select實(shí)現(xiàn)動(dòng)態(tài)選擇對(duì)應(yīng)值功能
- element el-table表格的二次封裝實(shí)現(xiàn)(附表格高度自適應(yīng))
- VUE2.0+ElementUI2.0表格el-table實(shí)現(xiàn)表頭擴(kuò)展el-tooltip
- VUE2.0+ElementUI2.0表格el-table循環(huán)動(dòng)態(tài)列渲染的寫法詳解
- element el-table如何實(shí)現(xiàn)表格動(dòng)態(tài)增加/刪除/編輯表格行(帶校驗(yàn)規(guī)則)
相關(guān)文章
這篇文章主要介紹了Vue項(xiàng)目build后,圖片加載不出來的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
vue恢復(fù)初始數(shù)據(jù)this.$data,this.$options.data()解析
這篇文章主要介紹了vue恢復(fù)初始數(shù)據(jù)this.$data，this.$options.data()解析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
vue.js實(shí)現(xiàn)一個(gè)瀑布流的組件
這篇文章主要為大家介紹了vue.js實(shí)現(xiàn)一個(gè)瀑布流的組件示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
vue開發(fā)移動(dòng)端使用better-scroll時(shí)click事件失效的解決方案
這篇文章主要介紹了vue開發(fā)移動(dòng)端使用better-scroll時(shí)click事件失效的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2021-07-07
vue?demi支持sfc方式的vue2vue3通用庫(kù)開發(fā)詳解
這篇文章主要為大家介紹了vue?demi支持sfc方式的vue2vue3通用庫(kù)開發(fā)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
vue表單驗(yàn)證自定義驗(yàn)證規(guī)則詳解
這篇文章主要為大家詳細(xì)介紹了vue表單驗(yàn)證自定義驗(yàn)證規(guī)則，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
今天小編就為大家分享一篇vue2.0獲取鼠標(biāo)位置的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)導(dǎo)航收縮框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
vue3中實(shí)現(xiàn)文本顯示省略號(hào)和tooltips提示框的方式詳解
在?B?端業(yè)務(wù)中,我們經(jīng)常會(huì)遇到文本內(nèi)容超出容器區(qū)域需顯示省略號(hào)的需求,當(dāng)鼠標(biāo)移入文本時(shí),會(huì)出現(xiàn)?Tooltip?顯示完整內(nèi)容,最近,我也遇到了這樣的場(chǎng)景,接下來給大家介紹vue3中實(shí)現(xiàn)文本顯示省略號(hào)和tooltips提示框的方式,需要的朋友可以參考下2024-04-04
今天小編就為大家分享一篇關(guān)于實(shí)例講解v-if和v-show的區(qū)別，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧2019-01-01