Element-UI分页控件current-page属性常见错误的踩坑指南
2023-09-16 06:24:04
使用Element-UI的pagination组件时，对current-page属性的使用难免会遇到各种各样的疑惑，本文将为大家讲述在使用current-page属性时最容易踩的一个坑。
踩坑指南
对于这个坑，我详细的叙述一下如何踩进去的：首先，我使用了一个带有分页功能的表格，并且使用了Element-ui的pagination组件来控制分页。
<el-pagination
layout="prev, pager, next"
:current-page="currentPage"
:page-size="pageSize"
:total="total"
@current-change="handleCurrentChange"
/>
export default {
data() {
return {
currentPage: 1,
pageSize: 10,
total: 100,
};
},
methods: {
handleCurrentChange(val) {
this.currentPage = val;
},
},
};
如果只是到这的话，一切都是正常的。坑就出现在这里，为了方便管理数据，我将currentPage、pageSize、total这三个变量都存入了一个名为paginationData的data中，如下所示：
export default {
data() {
return {
paginationData: {
currentPage: 1,
pageSize: 10,
total: 100,
},
};
},
methods: {
handleCurrentChange(val) {
this.paginationData.currentPage = val;
},
},
};
然后，组件就出问题了。当点击分页按钮时，currentPage的值会发生改变，但是pagination组件的current-page属性并没有随之改变。这让我百思不得其解，为什么会出现这种情况呢？
经过一番排查，我终于找到了问题所在。原来，当我将currentPage、pageSize、total这三个变量存入paginationData时，Vue并不会对paginationData进行深度监听。这意味着，当paginationData中的值发生改变时，Vue并不会自动更新pagination组件的current-page属性。
为了解决这个问题，我需要对paginationData进行深度监听。有两种方法可以实现这一点。
- 在data()中使用Vue.observable()方法将paginationData标记为可观察对象。
export default {
data() {
return {
paginationData: Vue.observable({
currentPage: 1,
pageSize: 10,
total: 100,
}),
};
},
methods: {
handleCurrentChange(val) {
this.paginationData.currentPage = val;
},
},
};
- 在methods()中使用this.$set()方法更新paginationData中的值。
export default {
data() {
return {
paginationData: {
currentPage: 1,
pageSize: 10,
total: 100,
},
};
},
methods: {
handleCurrentChange(val) {
this.$set(this.paginationData, 'currentPage', val);
},
},
};
这两种方法都可以解决这个问题。
总结
Element-UI的pagination组件的current-page属性是一个非常有用的属性，可以帮助我们轻松控制分页。但是在使用这个属性时，需要注意一个坑：当我们将currentPage、pageSize、total这三个变量存入一个data时，Vue并不会对这个data进行深度监听。这意味着，当这三个变量发生改变时，Vue并不会自动更新pagination组件的current-page属性。为了解决这个问题，我们需要对这个data进行深度监听。
