怎么把一个数组以及vue和elementui的分页表格中的当前页数和每页显示条目个数一起提交
时间: 2023-06-19 10:10:26 浏览: 139
可以将数组、当前页数和每页显示条目个数都放在一个对象中,然后将该对象作为参数传递给后端接口。在前端的代码中,可以利用 Vue 的双向绑定特性来实现用户选择当前页数和每页显示条目个数的操作,同时也可以监听这两个变量的变化,当它们发生改变时重新向后端请求数据。
下面是一个大致的代码示例:
```html
<template>
<div>
<el-pagination
:current-page.sync="currentPage"
:page-size.sync="pageSize"
:total="total"
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
></el-pagination>
<el-table :data="tableData" border>
<el-table-column prop="id" label="ID"></el-table-column>
<el-table-column prop="name" label="Name"></el-table-column>
<el-table-column prop="age" label="Age"></el-table-column>
<el-table-column prop="address" label="Address"></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
currentPage: 1,
pageSize: 10,
total: 0,
tableData: []
};
},
methods: {
fetchData() {
// 构造请求参数
const params = {
page: this.currentPage,
pageSize: this.pageSize
};
// 发送请求
axios.get('/api/getData', { params }).then(res => {
this.tableData = res.data.list;
this.total = res.data.total;
});
},
handleCurrentChange(val) {
this.currentPage = val;
this.fetchData();
},
handleSizeChange(val) {
this.pageSize = val;
this.fetchData();
}
},
mounted() {
this.fetchData();
}
};
</script>
```
在上面的代码中,我们利用了 ElementUI 中的 `el-pagination` 组件来实现分页功能,并且使用了双向绑定来同步当前页数和每页显示条目个数。当用户选择页数或者每页显示条目个数时,会触发对应的函数来重新请求数据。在请求数据时,我们将当前页数和每页显示条目个数都放在一个对象中作为请求参数,这样后端就可以同时获取到这些信息了。
阅读全文