element-ui中el-pagination分页组件，切换每页显示数量时，有时候数据不显示或获取到的数据为空；只想触发size-change事件不触发current-change事件

最新推荐文章于 2024-08-09 10:46:42 发布

琹箐

最新推荐文章于 2024-08-09 10:46:42 发布

阅读量1.4w

点赞数 11

文章标签： vue.js elementui

本文链接：https://blog.csdn.net/qq_45327886/article/details/120438601

版权

一、问题

1.使用<el-pagination></el-pagination>组件时，使用size-change属性切换每页显示数量时，有时候切换会导致数据不显示

1）html

      <el-pagination
        :total="msgTotal"
        :page-size="msgSize"
        background
        :page-sizes="[2, 3, 5, 10, 50, 100]"
        :pager-count="5"
        :current-page="msgPage"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></el-pagination>

2)js

 handleSizeChange(val) {
      console.log("sizeChange", val);
      this.msgSize = val;
      this.getMessagesList();
    },
    handleCurrentChange(val) {
      console.log("currentChange", val);
      this.msgPage = val;
      this.getMessagesList();
    },
getMessagesList() {
      if (this.msgPage < 0) this.msgPage = 1;
      //getMsgsList：获取数据的api
      getMsgsList({
        data: { readed: 0 },
        page: this.msgPage - 1,
        size: this.msgSize,
      })
        .then((res) => {
          console.log(
            "getMessagesList:",
            res,
            "msgPage",
            this.msgPage,
            this.msgSize
          );
         //保证获取到数据
          if (res.status === 200 ) {
            this.msgsList = res.data.content;
            this.msgTotal = res.data.totalElements;
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },

二、原因

1.通过console.log发现。如果当前页不是第一页，切换每页显示的数量，将会导致 handleSizeChange和handleCurrentChange都被调用。进而 getMessagesList会被调用两次。

例如：当前页为第二页，每页显示 5 条数据；切换为每页显示10条数据。

getMessagesList被调用两次,且有一次取到的数据为空

1）初始：

2）切换每页显示数据

2.就这样一直在想办法要怎么样才能再触发size-change事件时，不触发current-change。然而想的方法虽然可行，但是导致代码的逻辑混乱、繁琐。

3.直到想要修改：切换每页显示数量时，默认定位到第一页时，发现竟然就算没有自己想的那些复杂逻辑，也不会同时触发size-change和current-change事情。只触发了size-change事件。

修改handleSizeChange函数为：

 handleSizeChange(val) {
      console.log("sizeChange", val);
      this.msgSize = val;
      //默认跳转到第一页,必须设置
      //否则会当切换每页显示数量时,handleSizeChange和handleCurrentChange都会被调用
     this.msgPage = 1;
      this.getMessagesList();
    },

1）初始