el-table 做一个分页组件
时间: 2024-01-16 15:03:05 浏览: 42
要使用 `el-table` 实现分页功能,可以按照以下步骤进行:
1. 在页面上引入 `el-pagination` 组件,或者使用 `el-table` 内置的分页组件。
2. 在 `el-table` 组件中添加 `:data` 属性,绑定数据源。
3. 在 `el-table` 组件中添加 `:page-size` 属性,设置每页显示的数据量。
4. 在 `el-table` 组件中添加 `:current-page` 属性,绑定当前页码。
5. 在 `el-table` 组件中添加 `@size-change` 和 `@current-change` 事件,分别处理分页大小和页码改变的逻辑。
6. 在 `el-table` 组件中添加 `slot="append"`,在表格下方添加分页组件。
下面是一个示例代码:
```html
<template>
<div>
<el-table :data="tableData" :page-size="pageSize" :current-page.sync="currentPage" @size-change="handleSizeChange" @current-change="handleCurrentChange">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
<el-table-column prop="email" label="邮箱"></el-table-column>
<el-table-column prop="phone" label="电话"></el-table-column>
<el-table-column prop="company" label="公司"></el-table-column>
<template slot="append">
<el-pagination :current-page.sync="currentPage" :page-size="pageSize" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
</template>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [], // 数据源
currentPage: 1, // 当前页码
pageSize: 10, // 每页显示数据量
total: 0, // 总数据量
};
},
methods: {
// 分页大小改变
handleSizeChange(val) {
this.pageSize = val;
this.getData();
},
// 页码改变
handleCurrentChange(val) {
this.currentPage = val;
this.getData();
},
// 获取数据
getData() {
// 发送请求获取数据
// ...
// 设置总数据量
this.total = 100;
// 设置数据源
this.tableData = [{ name: "张三", age: 20, address: "北京市", email: "zhangsan@example.com", phone: "13812345678", company: "ABC公司" }, { name: "李四", age: 25, address: "上海市", email: "lisi@example.com", phone: "13912345678", company: "DEF公司" }, { name: "王五", age: 30, address: "广州市", email: "wangwu@example.com", phone: "13712345678", company: "GHI公司" }];
},
},
mounted() {
this.getData();
},
};
</script>
```