handleSizeChange(val) { this.limit.pageSize = val; this.currentPage = 1; this.limit.page = 1; this.getApiExtPage(this.limit); }, handleCurrentChange(val) { this.currentPage = val; this.limit.page = val; this.getApiExtPage(this.limit); },优化
时间: 2024-02-21 07:00:16 浏览: 20
这段代码是用于Vue.js分页的功能实现。为了提高代码可读性和可维护性,可以进行以下优化:
1. 将handleSizeChange和handleCurrentChange合并成一个方法,使用参数判断是pageSize的变化还是page的变化,从而执行相应的操作。
2. 将page和pageSize的变化统一放在一个方法中处理,避免代码重复。
3. 将getApiExtPage方法封装成一个公共方法,避免重复编写相同的代码。
4. 使用ES6的箭头函数定义方法,使代码更加简洁。
优化后的代码如下:
```
handlePageChange(val, type) {
if (type === 'pageSize') {
this.limit.pageSize = val;
this.currentPage = 1;
this.limit.page = 1;
} else {
this.currentPage = val;
this.limit.page = val;
}
this.getApiExtPage(this.limit);
},
getApiExtPage(limit) {
// 将获取API数据的代码封装为一个公共方法
}
// 在模板中使用方法
<pagination
:page-size="limit.pageSize"
:current-page="currentPage"
:total="total"
@size-change="handlePageChange($event, 'pageSize')"
@current-change="handlePageChange($event, 'page')"
></pagination>
```
通过这些优化,可以使代码更加简洁清晰,易于阅读和维护。同时,公共方法的封装也可以提高代码的复用性,减少代码冗余。