elementUI分页中改变current-page绑定的值无效问题的解决

问题

今天在使用elementUI分页组件el-pagination时，在方法中修改current-page绑定的值，正常来说页面上显示的当前所在的页码会随着改变，但是并没有。

current-page绑定的值为1

当我将current-page绑定的值改为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>

解决方法

第一种： 添加双向绑定
在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>

第二种：给组件添加key属性
在el-pagination组件中添加一个key属性，在每次修改current-page绑定的值时都对key绑定的值进行修改（可以考虑使用随机数或当前时间字符串，亦或者是直接将current-page的新值传给key ），这样在每次修改current-page绑定的值时都强制刷新组件了。

添加key属性：

<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
	}
}

第三种：添加v-if
这种方法与第二种方法类似。给分页组件添加一个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绑定的值无效问题的三种方法。