elementUI ページングで current-page によってバインドされた値を変更するという無効な問題の解決策

質問

現在、elementUI ページネーション コンポーネント el-pagination を使用する場合、メソッド内の current-page binding の値を変更します。通常、ページに表示される現在のページ番号はそれに応じて変更されますが、変更されません。

現在のページのバインディングの値は 1 です。

現在のページのバインディングの値を 3 に変更すると、データは変更されますが、ビューの表示は変わりません。

ページネーションコード:

<!-- 分页 -->
<el-pagination
  background
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page="currentPage"
  :page-size="size"
  layout="total, prev, pager, next"
  :total="total">
</el-pagination>

解決

1 つ目: 双方向バインディングを追加し
、current-page の後に .sync を追加します。

<!-- 分页 -->
<el-pagination
  background
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :page-size="size"
  layout="total, prev, pager, next"
  :total="total"
  :current-page.sync="currentPage">
</el-pagination>

2 番目:
コンポーネントに key 属性を追加します。 el-pagination コンポーネントに key 属性を追加し、現在のページにバインドされている値が変更されるたびに、キーにバインドされている値を変更します (乱数または現在の時刻文字列を使用するか、current-page の新しい値を key に直接渡します)。これにより、current-page にバインドされた値が変更されるたびにコンポーネントが強制的に更新されます。

キー属性を追加します。

<el-pagination
  background
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :page-size="size"
  layout="total, prev, pager, next"
  :total="total"
  :current-page.sync="currentPage"
  :key="key">
</el-pagination>

currentPage の値を変更する場合:

data () {
    
    
  return {
    
    
  	currentPage: 1, 
  	key: 0,
  }
},
methods:{
    
    
	changeCurrentPage(){
    
    
		this.currentPage = 2
		this.key = 2
	}
}

3 番目の方法: v-if を追加する
この方法は 2 番目の方法と似ています。ページング コンポーネントに v-if バインディングを追加します。current-page のバインディングを変更するときに、同時に v-if のバインディング値を変更して、ページング コンポーネントの再レンダリングを実現します。

<div v-if="show">
	<el-pagination
 	  background
	  @size-change="handleSizeChange"
	  @current-change="handleCurrentChange"
  	:page-size="size"
  	layout="total, prev, pager, next"
 		:total="total"
	  :current-page.sync="currentPage">
	</el-pagination>
</div>

currentPage の値を変更する場合:

data () {
    
    
  return {
    
    
  	currentPage: 1, 
  	show: true,
  }
},
methods:{
    
    
	changeCurrentPage(){
    
    
		this.currentPage = 2 //修改currentPage
		this.show = false;//让分页隐藏
		this.$nextTick(() => {
    
    //重新渲染分页
    		this.show = true;
		});
	}
}

上記は、elementUI ページングで current-page にバインドされた値を変更するという無効な問題を解決する 3 つの方法です。