如何获取vue和elementui的分页表格中的当前页数和每页显示条目个数
时间: 2023-06-20 08:07:00 浏览: 106
在 Vue 和 ElementUI 中,分页表格可以通过 `el-pagination` 和 `el-table` 组件来实现。你可以使用 `v-model` 来绑定当前页数和每页显示条目个数的数据,具体实现如下:
```html
<template>
<div>
<el-pagination
v-model="currentPage"
:page-sizes="pageSizes"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
<el-table
:data="tableData"
:page-size="pageSize"
:current-page="currentPage"
@selection-change="handleSelectionChange">
<!-- 表格列定义 -->
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
currentPage: 1,
pageSizes: [10, 20, 30, 50],
pageSize: 10,
total: 100,
tableData: [],
};
},
methods: {
handleSelectionChange(selection) {
console.log('当前页数:', this.currentPage);
console.log('每页显示条目个数:', this.pageSize);
},
},
};
</script>
```
在上面的示例中,我们使用了 `v-model` 来双向绑定了当前页数 `currentPage` 和每页显示条目个数 `pageSize`。在 `el-table` 组件中,我们使用了 `:current-page` 和 `:page-size` 来指定当前页数和每页显示条目个数。在 `handleSelectionChange` 方法中,我们可以通过访问 `this.currentPage` 和 `this.pageSize` 来获取当前页数和每页显示条目个数。
阅读全文