element ui table怎么用element分页
时间: 2023-11-21 21:58:47 浏览: 100
以下是使用Element UI实现分页的示例代码:
```html
<template>
<div>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="日期" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 20, 30, 40]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="1000">
</el-pagination>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [],
currentPage: 1,
pageSize: 10
};
},
methods: {
handleSizeChange(val) {
this.pageSize = val;
this.getTableData();
},
handleCurrentChange(val) {
this.currentPage = val;
this.getTableData();
},
getTableData() {
// 发送请求获取表格数据
// 根据this.currentPage和this.pageSize获取对应的数据
// 将数据赋值给this.tableData
}
},
mounted() {
this.getTableData();
}
};
</script>
```
在上述代码中,我们使用了`el-table`组件来展示表格数据,使用`el-pagination`组件来实现分页功能。其中,`el-pagination`组件的`current-page`属性和`page-size`属性分别绑定了当前页码和每页显示条数,`@size-change`和`@current-change`事件分别监听了每页显示条数和当前页码的变化,当这些值发生变化时,会触发对应的事件处理函数,我们可以在这些事件处理函数中发送请求获取对应的数据并更新表格数据。
阅读全文
相关推荐
















