vue分页组件
1.普通分页组件
html部分
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="page.current" :page-sizes="[10, 20, 30, 40]" :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
data部分
total: 0,
page: {
pageSize: 10,
current: 1,
filterContent: {
参数1:' ',
}
},
js部分
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
this.getTable(val);
},
handleCurrentChange(item,val) {
console.log(`当前页: ${val}`);
this.page.current = val;
this.getTable(val);
},
2.分页组件切换页面触发事件 @size-change与@current-change传参
注意:@size-change="handleSizeChange(item, val)"写法无效
html部分
@size-change="(val) => handleSizeChange(item, val)"
@current-change="(val) => handleCurrentChange(item, val)"
js部分
handleSizeChange(item,val) {
console.log(`每页 ${val} 条`);
this.page.pageSize = val;
this.TabClick(item);
},
handleCurrentChange(item,val) {
console.log(`当前页: ${val}`);
this.page.current = val;
this.TabClick(item);
},