分页后,获取el-table当前页的数据
时间: 2024-03-12 16:49:41 浏览: 21
如果你使用了 `el-pagination` 分页组件对 `el-table` 进行分页,那么你可以通过以下步骤获取当前页的数据:
1. 在 `el-table` 上添加 `@current-change` 事件,用于监听当前页码变化事件。
```html
<el-table :data="tableData" @current-change="handleCurrentChange">
<!-- 表格列定义 -->
</el-table>
```
2. 在 `methods` 中定义 `handleCurrentChange` 方法,将当前页码保存到 `currentPage` 变量中。
```js
methods: {
handleCurrentChange(currentPage) {
this.currentPage = currentPage;
}
}
```
3. 在需要获取当前页数据的地方,使用 `filter` 方法筛选出当前页的数据。
```js
const currentPageData = this.tableData.filter((item, index) => {
const startIndex = (this.currentPage - 1) * this.pageSize;
const endIndex = startIndex + this.pageSize - 1;
return index >= startIndex && index <= endIndex;
});
console.log(currentPageData); // 当前页的数据
```
其中,`this.currentPage` 是上一步中保存的当前页码,`this.pageSize` 是每页显示的数据条数,`this.tableData` 是 `el-table` 的数据源。
需要注意的是,上述代码中假设数据源是一个数组,如果你使用了服务端分页,那么你需要根据当前页码和每页显示的数据条数向服务端请求数据,并将返回的数据渲染到表格中。