element-ui中頁面縮放時table表格內容錯位的解決

更新時間：2022年08月01日 10:33:03 作者：陪著月亮

這篇文章主要介紹了element-ui中頁面縮放時table表格內容錯位的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

element-ui 頁面縮放時table表格內容錯位

當table內容較多的時候，橫向拉動瀏覽器界面。最后一列自定義按鈕，就會出現(xiàn)上下錯誤的情況。

解決辦法：

this.$refs.table.doLayout();

table增加ref屬性。

mounted() {
  window.addEventListener('resize', this.handleResize);
}

methods: {
    handleResize() {
        this.$nextTick(()=> {
            this.$refs.table.doLayout();
        });
    }
}

destroyed() {
     window.removeEventListener("resize", this.handleResize);
}

element-ui表格優(yōu)化--顯示錯位問題

ElementUI el-table 動態(tài)顯示表格的時候，會發(fā)生顯示錯位的情況，拖拽一下又恢復正常了

之前試試了各種css都沒有效果

/* 表格錯位的問題 */
	.working-hours-table {
    /deep/.el-table__fixed-body-wrapper{
      top:29px !important;
      height: calc(100% - 29px) !important;
    }
    /deep/.el-table__fixed{
		height: 100% !important;
    }
    /deep/ .el-table__fixed-right{
      height: 100% !important;
    }
  }

解決辦法：

watch: {
            // tableData是el-table綁定的數(shù)據(jù)
            tableData: {
                // 解決表格顯示錯位問題
                handler () {
                    this.$nextTick(() => {
                        // tableRef是el-table綁定的ref屬性值
                        this.$refs.multipleTable.doLayout() // 對 Table 進行重新布局
                    })
                },
                deep: true
            }
        },

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vue3?el-table結合seamless-scroll實現(xiàn)表格數(shù)據(jù)滾動的思路詳解
這篇文章主要介紹了vue3?el-table結合seamless-scroll實現(xiàn)表格數(shù)據(jù)滾動,創(chuàng)建兩個table，隱藏第一個table的body部分，這樣就能得到一個固定的head，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-07-07
Element-ui tree組件自定義節(jié)點使用方法代碼詳解
本文通過實例代碼給大家介紹了Element-ui tree組件自定義節(jié)點使用方法 ,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
2018-09-09
Vue 父子組件數(shù)據(jù)傳遞的四種方式( inheritAttrs + $attrs + $listeners)
這篇文章主要介紹了Vue 父子組件數(shù)據(jù)傳遞的四種方式( inheritAttrs + $attrs + $listeners),需要的朋友可以參考下
2018-05-05
Vue3響應式方案及ref?reactive的區(qū)別詳解
眾所周知ref和reactive都是用來作響應式數(shù)據(jù),下面這篇文章主要給大家介紹了關于Vue3響應式方案及ref?reactive區(qū)別的相關資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下
2022-12-12
Vue + Echarts頁面內存占用高的問題解決方案
點擊左側的菜單可以切換不同的看板,有些看板頁面中的報表比較多,用戶多次切換后頁面的內存占用可以上升為GB級,嚴重時導致頁面內存溢出,使得頁面崩潰,極大影響了用戶體驗,本文給大家介紹Vue + Echarts頁面內存占用高的問題解決方案,感興趣的朋友一起看看吧
2024-02-02
vue刷新頁面后params參數(shù)丟失的原因和解決方法
這篇文章主要給大家介紹了vue刷新頁面后params參數(shù)丟失的原因和解決方法,文中通過代碼示例給大家介紹的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下
2023-12-12
vue element 表頭添加斜線的實現(xiàn)代碼
這篇文章主要介紹了vue element 表頭添加斜線的實現(xiàn)代碼,代碼簡單易懂，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2021-11-11
Vue如何實現(xiàn)驗證碼輸入交互
這篇文章主要介紹了Vue實現(xiàn)驗證碼輸入交互的示例，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下
2020-12-12
vue3組合式API實現(xiàn)todo列表效果
這篇文章主要介紹了vue3組合式API實現(xiàn)todo列表,下面用組合式?API的寫法,實現(xiàn)一個可新增、刪除的todo列表效果,需要的朋友可以參考下
2024-08-08
element中el-table表頭通過header-row-style設置樣式
有些時候需要給element-ui表頭設置不同樣式,本文主要介紹了element中el-table表頭通過header-row-style設置樣式,具有一定的參考價值,感興趣的可以了解一下
2024-01-01