欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

element-ui中頁面縮放時(shí)table表格內(nèi)容錯位的解決

 更新時(shí)間：2022年08月01日 10:33:03   作者：陪著月亮  
這篇文章主要介紹了element-ui中頁面縮放時(shí)table表格內(nèi)容錯位的解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

element-ui 頁面縮放時(shí)table表格內(nèi)容錯位

當(dāng)table內(nèi)容較多的時(shí)候， 橫向拉動瀏覽器界面。最后一列自定義按鈕，就會出現(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)顯示表格的時(shí)候，會發(fā)生顯示錯位的情況，拖拽一下又恢復(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 進(jìn)行重新布局
                    })
                },
                deep: true
            }
        },

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

  • 淺談Vue 初始化性能優(yōu)化

    淺談Vue 初始化性能優(yōu)化

    本篇文章主要介紹了淺談Vue 初始化性能優(yōu)化，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-08-08
  • vue遞歸組件實(shí)現(xiàn)elementUI多級菜單

    vue遞歸組件實(shí)現(xiàn)elementUI多級菜單

    這篇文章主要為大家詳細(xì)介紹了vue遞歸組件實(shí)現(xiàn)elementUI多級菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2022-07-07
  • 關(guān)于配置babel-plugin-import報(bào)錯的坑及解決

    關(guān)于配置babel-plugin-import報(bào)錯的坑及解決

    這篇文章主要介紹了關(guān)于配置babel-plugin-import報(bào)錯的坑及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-12-12
  • vue.js購物車添加商品組件的方法

    vue.js購物車添加商品組件的方法

    這篇文章主要介紹了vue.js購物車添加商品組件的方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2019-09-09
  • 詳解Vue中$refs和$nextTick的使用方法

    詳解Vue中$refs和$nextTick的使用方法

    這篇文章主要為大家介紹了Vue中$refs和$nextTick的使用方法，文中的示例代碼講解詳細(xì)，對我們學(xué)習(xí)Vue有一定幫助，需要的可以參考一下
    2022-03-03
  • Vue之表單事件數(shù)據(jù)綁定詳解

    Vue之表單事件數(shù)據(jù)綁定詳解

    這篇文章主要為大家介紹了Vue之表單事件的數(shù)據(jù)綁定，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助,希望能夠給你帶來幫助
    2021-11-11
  • Vue3中Hooks函數(shù)的使用及封裝思想詳解

    Vue3中Hooks函數(shù)的使用及封裝思想詳解

    Vue?3中的Hooks函數(shù)是一種用于在組件中共享可復(fù)用邏輯的方式，簡單來說，就是將單獨(dú)功能的js代碼抽離出來，?加工成公共函數(shù)，從而達(dá)到邏輯復(fù)用，下面小編就來和大家聊聊Hooks函數(shù)的使用及封裝思想吧
    2023-06-06
  • Vue3中進(jìn)行頁面局部刷新組件刷新的操作方法

    Vue3中進(jìn)行頁面局部刷新組件刷新的操作方法

    這篇文章主要介紹了Vue3中進(jìn)行頁面局部刷新組件刷新的操作方法,本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2022-12-12
  • 移動端底部導(dǎo)航固定配合vue-router實(shí)現(xiàn)組件切換功能

    移動端底部導(dǎo)航固定配合vue-router實(shí)現(xiàn)組件切換功能

    經(jīng)常遇到這樣的需求，移動端中的導(dǎo)航并不是在頂部也不是在底部，而是在最底部且是固定的，當(dāng)我們點(diǎn)擊該導(dǎo)航項(xiàng)時(shí)會切換到對應(yīng)的組件。這篇文章主要介紹了移動端底部導(dǎo)航固定配合vue-router實(shí)現(xiàn)組件切換功能,需要的朋友可以參考下
    2019-06-06
  • 解讀Vue-Router?使用?prams?路由傳參失效

    解讀Vue-Router?使用?prams?路由傳參失效

    這篇文章主要介紹了Vue-Router使用prams路由傳參失效,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2023-08-08

最新評論