elementui ページング コンポーネント el-pagination で次のページに切り替えると、データは正しく更新されますが、ページ番号は最初のページのままです。

1. 背景: ページング コンポーネントをカプセル化しました。コンポーネントでサポートされるパラメータには、ページ番号 pageIndex、ページあたりのデータ数、pageSize、データの総量などが含まれます。

2. 問題: インターフェイスはデータを要求し、ページは正常にレンダリングされます。ページング コンポーネントも成功しますが、2 番目のページに切り替えると、ページ データは正常に更新されます。2 番目のページ データですが、ページが即座に変更されます。表示された後、2 ページ目に戻る 1 ページ (つまり、データが 2 ページ目で、一番下のページ番号が 1 ページ目です) ページング コンポーネントを長時間探しましたが、見つかりませんでした。問題の原因を見つけてください。その後、Baidu で検索したところ、Elementui ページング コンポーネントのバグだと言っている人もいました。悪を信じない場合は、自分で問題を探し続けてください。なぜ一部のページでは問題が発生するのかこの問題はありませんが、このページには問題がありますか?

上記のコード:

function queryList(){
    var params = {
        pageI:this.pageIndex,
        pageS:this.pageSize
    };
    this.tableData = [];
    this.total = 0;
    Ajax(url,params).then((res)->{
        var meta = res.data;
        this.tableData = meta.list;
        this.total = meta.total;
    })
}

問題がわかりますか? いいえ、ロジックに問題はなく、ページング コンポーネントがページ番号を切り替えた後に QueryList が呼び出され、パラメーターの値も正しいです。

問題の鍵は合計です。はい、ページ番号を再び切り替えるときに合計を 0 に設定することはできません。ページ番号の切り替えには合計番号の変更は伴いません。変更されていないデータの合計が変更されないようにインターフェースに再度要求するのは正しいです。更新され、コンポーネントは更新されません。

次に、コードを次のように変更します。

function queryList(){
    var params = {
        pageI:this.pageIndex,
        pageS:this.pageSize
    };
    this.tableData = [];
    Ajax(url,params).then((res)->{
        var meta = res.data;
        this.tableData = meta.list;
        this.total = meta.total;
    })
}

これで問題なくページ番号データを切り替えて更新できるようになりました。

Vue の美しさと芸術がここにあります! とても楽しいこと。。。。