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

這篇“element-ui中頁面縮放時(shí)table表格內(nèi)容錯(cuò)位如何決”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“element-ui中頁面縮放時(shí)table表格內(nèi)容錯(cuò)位如何決”文章吧。

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

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

解決辦法：

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)化--顯示錯(cuò)位問題

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

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

/* 表格錯(cuò)位的問題 */
	.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: {
                // 解決表格顯示錯(cuò)位問題
                handler () {
                    this.$nextTick(() => {
                        // tableRef是el-table綁定的ref屬性值
                        this.$refs.multipleTable.doLayout() // 對(duì) Table 進(jìn)行重新布局
                    })
                },
                deep: true
            }
        },

以上就是關(guān)于“element-ui中頁面縮放時(shí)table表格內(nèi)容錯(cuò)位如何決”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。