• 关于 eltable 无限抖动


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

    友友们给的方案:
    1、设置table的样式为 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 {  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{ 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 组件中有用到,希望对你有所帮助。

  • 相关阅读:
    mockito测试final类/static方法/自己new的对象
    flink 1.11.2 学习笔记(5)-处理消息延时/乱序的三种机制
    linux查找操作
    分析MongoDB架构案例
    legend3---bootstrap modal框出现蒙层,无法点击modal框内容(z-index问题)
    legend3---laravel报419错误
    laravel自定义中间件实例
    laravel中间件Middleware原理解析及实例
    git: Failed to connect to github.com port 443: Timed out
    记忆规律
  • 原文地址:https://www.cnblogs.com/vicky123/p/16190264.html
Copyright © 2020-2023  润新知