vue element-ui 分页闪屏问题

最新推荐文章于 2023-08-09 11:29:37 发布

原创最新推荐文章于 2023-08-09 11:29:37 发布 · 2.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #element-ui

学习笔记专栏收录该内容

15 篇文章

订阅专栏

本文探讨了在前端开发中，由于对象数组的不当处理导致的列表闪屏问题及其解决方案。通过避免直接修改绑定的data值，使用中间对象传递分页信息，有效防止了DOM的频繁重绘，提升了用户体验。

一、问题原因

我想将整个分页对象传到后端，但是使用qs转换时，数组出现了问题。于是想将数组用JSON来转。可是每次调用时，都会出现闪屏（列表长度瞬间很长，然后恢复）。

二、解决办法

经过努力，发现原来是在将对象里的数组用JSON转换时进行了一次赋值，改变了表格data的值：

      this.pageModel.tableData = JSON.stringify(this.pageModel.tableData)
      this.$axios({
        method: "post",
        url: "url",
        data : Qs.stringify(this.pageModel)
      }).then(res => {
        this.pageModel = res.data;
      });

于是用个中间对象来占时接收分页对象，使其不改变：

      let pageModel = {
          currentPage: this.pageModel.currentPage,
          total : this.pageModel.total,
          pageSize : this.pageModel.pageSize,
          tableData: JSON.stringify(this.pageModel.tableData)
        }
      this.$axios({
        method: "post",
        url: "/labelRest/list",
        data : Qs.stringify(pageModel)
      }).then(res => {
        this.pageModel = res.data;
      });

这样就解决了闪屏问题了。