el-table实现分页
时间: 2024-04-06 12:27:00 浏览: 52
el-table是Element UI框架中的一个表格组件,可以用于展示数据。要实现分页功能,可以通过以下步骤进行操作:
1. 在el-table组件中设置`pagination`属性为true,开启分页功能。
2. 设置`page-size`属性来指定每页显示的数据条数。
3. 使用`total`属性来指定总数据条数。
4. 通过`@current-change`事件监听当前页码的变化,可以在事件处理函数中获取当前页码,并根据需要进行数据请求或处理。
5. 可以使用`@size-change`事件监听每页显示条数的变化,可以在事件处理函数中获取每页显示条数,并根据需要进行数据请求或处理。
下面是一个示例代码:
```html
<template>
<div>
<el-table :data="tableData" :pagination="true" :page-size="pageSize" :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange">
<!-- 表格列配置 -->
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [], // 表格数据
pageSize: 10, // 每页显示条数
total: 0, // 总数据条数
currentPage: 1 // 当前页码
};
},
methods: {
// 当前页码变化时的处理函数
handleCurrentChange(currentPage) {
this.currentPage = currentPage;
// 根据需要进行数据请求或处理
},
// 每页显示条数变化时的处理函数
handleSizeChange(pageSize) {
this.pageSize = pageSize;
// 根据需要进行数据请求或处理
}
}
};
</script>
```