vue element-ui 分页闪屏问题

一、问题原因

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

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