后端返回所有数据vueelementui前端分页
时间: 2023-09-09 22:14:35 浏览: 149
vue实现前端分页完整代码
可以使用`element-ui`中提供的`el-pagination`组件实现分页,具体实现步骤如下:
1. 在Vue实例中定义一个变量来保存当前页码和每页显示的数据量。
```javascript
data() {
return {
currentPage: 1,
pageSize: 10,
total: 0,
tableData: []
}
}
```
2. 在Vue实例中定义一个方法来处理数据的分页逻辑。该方法根据当前页码和每页显示的数据量,在所有数据数组中截取出对应页码的数据。
```javascript
methods: {
handleCurrentChange(val) {
this.currentPage = val;
const start = (this.currentPage - 1) * this.pageSize;
const end = start + this.pageSize;
this.tableData = this.allData.slice(start, end);
}
}
```
3. 在Vue实例中定义一个钩子函数created(),在该函数中调用后端接口获取所有数据,并将数据保存到Vue实例中的一个数组中。
```javascript
created() {
// 调用后端接口获取所有数据
axios.get('api/getAllData').then(response => {
this.allData = response.data;
this.total = this.allData.length;
// 调用handleCurrentChange方法,显示第1页数据
this.handleCurrentChange(1);
}).catch(error => {
console.log(error);
});
}
```
4. 在Vue模板中使用`el-pagination`组件,并将该组件的`total`属性设置为保存所有数据的数组的长度,将该组件的`page-size`属性设置为每页显示的数据量,将该组件的`current-page`属性绑定到Vue实例中定义的变量上,将该组件的`@current-change`事件绑定到Vue实例中定义的方法上。
```html
<el-pagination
:total="total"
:page-size="pageSize"
v-model="currentPage"
@current-change="handleCurrentChange">
</el-pagination>
```
5. 在Vue模板中使用`v-for`指令循环遍历处理后的分页数据,并将每页显示的数据渲染到页面上。
```html
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="age"
label="年龄"
width="180">
</el-table-column>
</el-table>
```
以上是基本实现思路,具体实现细节可以根据具体需求进行调整。
阅读全文