admin 管理员组

文章数量: 887501

一、问题原因

我想将整个分页对象传到后端，但是使用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;
      });

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

三、总结

改变绑定的值，是会立即算下dom的。

 

其实tableData根本不需要传递给后端的，给个空数组就行了，所以用JSON转换是多余的……

不过如果以后端接收对象里有数组时可使用这种办法。

 

本文标签： 分页 Vue element UI

版权声明：本文标题：vue element-ui 分页闪屏问题 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1735051767h1695546.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。