Vue 3下element ui分页功能异常的解决

Pagination 分页

先不卖关子，直接上解决方案：

1、换页获取数据是异步操作，所以用async…await…

2、不要被官方的要监听误导！！！

下面描述一下我遇到的问题:

这是element ui最基础的分页组件，current-page这个参数就是当前页数，支持 v-model 双向绑定。代码如下：

<el-pagination 
class="pages"
v-model:currentPage="currentPage" 
:page-size="10" 
layout="total, prev, pager, next" 
:total="total" 
@current-change="handleCurrentPage" 
/>

 data() {
      return {
        // 表格数据
        tableData: [],
        total: 0,
        currentPage:0,
      };
   },

methods: {
	 handleCurrentPage(val) {
        console.log(val);
     }
},

执行上述代码，ok，一点问题没有。
但是，一旦我们对handleCurrentPage加入数据请求，
奇怪的事情就发生了：我们点击分页，表格里的数据确实发生了改变。不确定？那咱们再console.log()看一下，确实page发生着变化，但是当前的页码，它就始终停在1不动啊！回去看看代码：

 handleCurrentPage(val) {
        console.log(val);
        let that = this;
        that.tableData = [];
        that.total = 0;
        that.currentPage=val;// 更新双向绑定的currentPage
        let url = "your url" + val;
        // console.log(url);
         that.request(url, {}, "GET", {}).then((res) => {
          console.log(res.data);
          that.total = res.data.count;
          for (let i = 0; i < res.data.data.length; i++) {
            let obj = {};
            obj.index = i + 1;
            obj.id = res.data.data[i].id;
            obj.name = res.data.data[i].name;
            obj.score = res.data.data[i].score;
            obj.counter = res.data.data[i].counter;
            that.tableData.push(obj);
          }
          this.$message({
            message: "数据已更新",
            type: "success",
          })
        }).catch((res) => {
          console.log(res);
          this.$message({
            message: "数据请求失败",
            type: "error",
          })
        });
      }

这没什么毛病啊！

官方文档是这么写的：

到这，我就去监听了，发现没什么卵用（排个雷）

后来请教了一位大神，一语道破：换页是异步

瞬间懂了，异步操作一下就好了，上代码：

async handleCurrentPage(val) {
        console.log(val);
        let that = this;
        that.tableData = [];
        that.total = 0;
        let url = "your url" + val;
        // console.log(url);
        await that.request(url, {}, "GET", {}).then((res) => {
          console.log(res.data);
          that.total = res.data.count;
          for (let i = 0; i < res.data.data.length; i++) {
            let obj = {};
            obj.index = i + 1;
            obj.id = res.data.data[i].id;
            obj.name = res.data.data[i].name;
            obj.score = res.data.data[i].score;
            obj.counter = res.data.data[i].counter;
            that.tableData.push(obj);
          }
          this.$message({
            message: "数据已更新",
            type: "success",
          })
        }).catch((res) => {
          console.log(res);
          this.$message({
            message: "数据请求失败",
            type: "error",
          })
        });
        that.currentPage=val;
      }