關於Element-ui中el-table出現的表格錯位問題解決

Posted on by

前言

在使用element-ui中的el-table時，我們經常會用到fiexd屬性，而使用瞭fixed屬性之後，就會容易在各種場景出現表格錯位的問題。

查閱element-ui官網，發現官網提供瞭doLayout方法來解決這個問題

總結容易出現錯位問題的幾種場景及解決辦法

1、數據更新後出現的錯位問題

1.1 直接在數據賦值後執行doLayout方法

this.data = data;
// 在數據更新後執行
this.$nextTick(() => {
      // myTable是表格的ref屬性值
      if (this.$refs.myTable && this.$refs.myTable.doLayout) {
        this.$refs.myTable.doLayout();
      }
})

1.2在生命周期updated裡執行doLayout方法

updated() {
    // myTable是表格的ref屬性值
    if (this.$refs.myTable && this.$refs.myTable.doLayout) {
      this.$refs.myTable.doLayout();
    }
}

2、瀏覽器窗口大小變化時出現的錯位問題

// 綁定window的onresize事件（註意，onresize事件隻能有一個）
window.onresize = () => {
      // myTable是表格的ref屬性值
      if (this.$refs.myTable && this.$refs.myTable.doLayout) {
        this.$refs.myTable.doLayout();
      }
}

3、當有多個Tab標簽時，切換標簽出現的錯位問題

這時可以有多種解決方式

3.1 在組件守衛beforeRouteEnter裡執行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裡執行doLayout方法

activated() {
    // myTable是表格的ref屬性值
    if (this.$refs.myTable && this.$refs.myTable.doLayout) {
      this.$refs.myTable.doLayout();
    }
 }

3.3 也可以通過監聽路由，在watch裡執行doLayout方法

watch: {
    $route() {
      this.$nextTick(() => {
        // myTable是表格的ref屬性值
        if (this.$refs.myTable && this.$refs.myTable.doLayout) {
          this.$refs.myTable.doLayout();
        }
      })
    }
 }

如果當項目已經開發進入尾聲，此時需要修改大量的文件，而我們可能更希望一次性解決這個問題，這個時候可以在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() {
    //數據改變時
    this.handleRefreshTable();
  },
  methods: {
    handleRefreshTable() {
      this.$nextTick(() => {
        // 獲取頁面中已註冊過ref的所有的子組件。
        let refList = this.$refs.appView.$refs;
        if (refList) {
          for (let i of Object.keys(refList)) {
            // 根據doLayout方法判斷子組件是不是el-table
            if (refList[i] && refList[i].doLayout) {
              // 執行doLayout方法
              refList[i].doLayout();
            }
          }
        }
      })
    }
  }
};
</script>

附：解決element中el-table中表頭和內容錯位的方法

在使用element中table組件的時候，有時候在部分不兼容的瀏覽器中，會出現以下表頭和內容錯位的情況。以下提供瞭兩種解決方案，親測有效果。

方法一：

在第一個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' ,然後在調取到數據後執行以下代碼

this.$nextTick(() => {
   this.$refs.tableRef.doLayout()
})

總結

到此這篇關於Element-ui中el-table出現的表格錯位問題解決的文章就介紹到這瞭,更多相關Element-ui中el-table表格錯位內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：