技术栈

Element UI 表格换页渲染闪烁问题解决

Vue,JavaScript

使用Element UI自带的分页组件异步请求API数据后发现翻页时候总会闪烁一下,特别影响体验。

问题代码参考如下:

        handleCurrentChangeForum(page) {

            //清理翻页前数据
            this.forum_info = [];

            //发起请求
            this.$http.post(
                process.env.SERVER_URL + '/api/uc/load_activity',
                {page:page},
                {emulateJSON:true}
            )
            .then(
                function(res) {

                    if(res.body.code === 1) {

                        this.forum_info = res.body.data;
                    }else {
                        this.$notify.error({message:res.body.info});
                    }
                }
            );
        },

将清理上一页缓存步骤代码this.forum_info = [];放进ajax响应内解决

解决代码参考如下:

        handleCurrentChangeForum(page) {

            //发起请求
            this.$http.post(
                process.env.SERVER_URL + '/api/uc/load_activity',
                {page:page},
                {emulateJSON:true}
            )
            .then(
                function(res) {

                    if(res.body.code === 1) {
                        this.forum_info = [];
                        this.forum_info = res.body.data;
                    }else {
                        this.$notify.error({message:res.body.info});
                    }
                }
            );
        },

参考文章:https://blog.csdn.net/qq_40836414/article/details/106423309

点我评论
打赏本文
二维码


46

文章

22

标签