element-ui绑定的current-page失效

最新推荐文章于 2026-08-08 15:02:14 发布

原创最新推荐文章于 2026-08-08 15:02:14 发布 · 2.5k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

当前文章被以下社区和专栏收录：

本文探讨了Element UI中el-pagination的currentPage绑定失效现象，当数据加载前清空列表和total导致其值重置为1的问题。提供了两种解决方案，包括在获取数据后更新currentPage和避免预先清空数据。

element-ui绑定的current-page失效

描述：element-ui": "^2.12.0，el-pagination绑定current-page，点击分页（除第一页）后，获取到数据之后current-page绑定值自动变为1。
原因：每次获取数据之前先设置了数据列表为空，total绑定值为0，这时current-page绑定值如果大于1，则会自动变为1。如下：

// html
<el-pagination
  :current-page.sync="page.pageNum"
  :page-size="page.pageSize"
  @current-change.sync="getData"
  :total="page.total"
  ></el-pagination>

// js
getData () {
	this.page.total = 0
	this.list = []
	axios.getData(this.page).then(res => {
		this.list = res.data.data
		this.page.total = res.data.total
	})
}

解决：

方法一：@current-change会传当前点击的分页值，可以传给this.page.pageNum

getData (page = 1) {
	this.page.total = 0
	this.list = []
	axios.getData(this.page).then(res => {
		this.page.pageNum = page // 获取数据后重新为pageNum赋值
		this.list = res.data.data
		this.page.total = res.data.total
	})
}

方法二：获取数据之前不要清空数据

getData () {
	// this.page.total = 0
	// this.list = []
	axios.getData(this.page).then(res => {
		this.list = res.data.data
		this.page.total = res.data.total
	})
}