elementページングコンポーネントを解決し、検索後にcurrent-pageバインドされたデータが変わりましたが、ページの現在のページ番号は変わりません.

3973 ワード

前言
前編でフロントを書いてページング問題を解決した時はこの問題はありませんでしたが、実際のプロジェクトのバックグラウンドで遭遇したことがあるので、ここで専門的に言って、フロントのページングを参考にしてこのような問題が発生したら、この方法も使えます!bug:vueとelement実装のバックグラウンドページングで、現在は2ページ目で、検索をクリックしてcurrent-pageを1に強制的に設定しますが、現在のページか2ページ目かは変わりません.
解決策
ページングの使い方はもちろん、前編のフロントを参考にしてページングを解決します
  • ページel-pagination v-if="pageshow"
  •  <el-pagination v-if="pageshow" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="page" :page-sizes="[1, 2,5, 10]" :page-size="limit"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
    
  • ここでelementのページングを操作するにはバグがあります.検索後の現在のページのデータが変化したので、元のページングは現在のページが変化しません.これは問題に直面します.初めて5ページ目に滞在し、検索後のデータは5ページもありません.フロントのページングやバックグラウンドのページングにかかわらず、ページには「データがありません」と表示されます.しかし、実はデータがありますが、5ページ目のデータはありません.したがって、検索時に現在のページを1に設定します.
  • v-ifバインドデータを使用して、検索するたびに前のページングDomをログアウトします.画面のリフレッシュが完了すると、同じページングがレンダリングされ、再レンダリングは$nexttickに入れなければなりません.これにより、ページングを使用しても問題は発生しません.
  • searchはmethodsで呼び出すとき@click=「search」を検索ボタンにバインドすればよい
  • の方法です.
                search() {
                    this.page = 1
                    this.pageshow = false
                    this.getList()
                    this.$nextTick(() => {
                        this.pageshow = true
                    })
                }
    

    もし本文があなたの役に立つならば、私にcallを打つことを称賛することを忘れないでください~o(̄▽̄)doは問題の伝言overがあります~