最新消息: USBMI致力于为网友们分享Windows、安卓、IOS等主流手机系统相关的资讯以及评测、同时提供相关教程、应用、软件下载等服务。

vue element-ui 分页闪屏问题

业界 admin 15浏览 0评论

一、问题原因

我想将整个分页对象传到后端,但是使用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转换是多余的……

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

 

一、问题原因

我想将整个分页对象传到后端,但是使用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转换是多余的……

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

 

发布评论

评论列表 (0)

  1. 暂无评论