关于 el-table 无限抖动

抖动问题说明及解决方案
官方 issue 讨论

友友们给的方案:
1、设置table的样式为width: 99.9% !important;,但缩放的时候时还是容易复现;
2、给列设置宽度;

element-ui table源码上来看,列的宽度为自撑开时,为元素添加resize监听器(resizeListener),当元素大小改变时会重新计算列的宽度。

// element-ui/packages/table/src/table.vue
    ...
    bindEvents() {
        this.bodyWrapper.addEventListener('scroll', this.syncPostion, { passive: true });
        if (this.fit) {
          addResizeListener(this.$el, this.resizeListener);
        }
    },

    unbindEvents() {
        this.bodyWrapper.removeEventListener('scroll', this.syncPostion, { passive: true });
        if (this.fit) {
          removeResizeListener(this.$el, this.resizeListener);
        }
    },
    resizeListener() {
        if (!this.$ready) return;
        let shouldUpdateLayout = false;
        const el = this.$el;
        const { width: oldWidth, height: oldHeight } = this.resizeState;

        const width = el.offsetWidth;
        if (oldWidth !== width) {
          shouldUpdateLayout = true;
        }

        const height = el.offsetHeight;
        if ((this.height || this.shouldUpdateHeight) && oldHeight !== height) {
          shouldUpdateLayout = true;
        }

        if (shouldUpdateLayout) {
          this.resizeState.width = width;
          this.resizeState.height = height;
          this.doLayout();
        }
    },

    doLayout() {
        if (this.shouldUpdateHeight) {
          this.layout.updateElsHeight();
        }
        this.layout.updateColumnsWidth();
    },
    ...

那么,是不是意味着设置 fit: false,并 table{width: 100% !important;}也就可以解决了呢?(待你验证,通过记得告诉我哦)
另一种方案:
移除元素监听器resizeListener,给window添加监听器resize

import { removeResizeListener } from 'element-ui/src/utils/resize-event';
export default {
    methods: {
        resizeTableView(){
            const table = this.$refs.table;
            table.doLayout()
        }
    },
    mounted () {
        const table = this.$refs.table;
        removeResizeListener(table.$el, table.resizeListener)
        window.addEventListener("resize", this.resizeTableView)
    },
    beforeDestroy () {
        window.removeEventListener("resize", this.resizeTableView)
    },
}

上面的方案,在封装 BaseTableList 组件中有用到,希望对你有所帮助。

posted @ 2022-04-25 14:56  十一是假期啊  阅读(1575)  评论(0编辑  收藏  举报