關於Element-ui中el-table出現的表格錯位問題解決
前言
在使用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!
推薦閱讀:
- element el-table表格的二次封裝實現(附表格高度自適應)
- 關於Element-ui中table默認選中toggleRowSelection問題
- element 表格多級表頭子列固定的實現
- Vue中Element的table多選表格如何實現單選
- elementUi 中table表尾插入行的實例