el-pagination 和 el-table 可以很好地组合使用,实现分页功能。具体使用方法如下:
1. 在 el-table 中添加 :data 属性,绑定数据源。
2. 在 el-table 中添加 :row-key 属性,指定每行数据的唯一标识符。
3. 在 el-table 中添加 :pagination 属性,开启分页功能。
4. 在 el-table 中添加 @pagination-change 属性,绑定分页事件。
5. 在 el-pagination 中添加 :current-page 属性,绑定当前页码。
6. 在 el-pagination 中添加 :page-size 属性,指定每页显示的数据条数。
7. 在 el-pagination 中添加 :total 属性,指定数据总条目数。
8. 在 el-pagination 中添加 @size-change 属性,绑定每页显示数据条数改变事件。
9. 在 el-pagination 中添加 @current-change 属性,绑定当前页码改变事件。
示例代码如下:
```html
<template>
<div>
<el-table :data="tableData" :row-key="row => row.id" :pagination="pagination" @pagination-change="handlePaginationChange">
<el-table-column prop="id" label="ID"></el-table-column>
<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>
<el-pagination
:current-page="pagination.currentPage"
:page-size="pagination.pageSize"
:total="pagination.total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
layout="prev, pager, next, jumper, ->, total"
></el-pagination>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{ id: 1, name: '张三', age: 18, address: '北京市' },
{ id: 2, name: '李四', age: 20, address: '上海市' },
{ id: 3, name: '王五', age: 22, address: '广州市' },
{ id: 4, name: '赵六', age: 24, address: '深圳市' },
{ id: 5, name: '钱七', age: 26, address: '成都市' },
{ id: 6, name: '孙八', age: 28, address: '重庆市' },
{ id: 7, name: '周九', age: 30, address: '武汉市' },
{ id: 8, name: '吴十', age: 32, address: '南京市' },
],
pagination: {
currentPage: 1,
pageSize: 3,
total: 8,
},
};
},
methods: {
handlePaginationChange(val) {
this.pagination.currentPage = val;
},
handleSizeChange(val) {
this.pagination.pageSize = val;
},
handleCurrentChange(val) {
this.pagination.currentPage = val;
},
},
};
</script>
```