elementui中带分页的表格
时间: 2023-09-08 16:15:29 浏览: 128
在 Element UI 中创建带分页的表格非常简单。你可以使用 Element UI 的 `el-table` 组件和 `el-pagination` 组件来实现。
首先,确保你已经正确引入了 Element UI 的样式和相关的组件库。
接下来,你可以使用以下代码创建一个带分页的表格:
```html
<template>
<div>
<el-table :data="tableData" border>
<!-- 表格列 -->
<el-table-column label="姓名" prop="name"></el-table-column>
<el-table-column label="年龄" prop="age"></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"
:total="total"
layout="total, sizes, prev, pager, next, jumper">
</el-pagination>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [], // 表格数据
currentPage: 1, // 当前页码
pageSize: 10, // 每页显示的条数
total: 0 // 总条数
}
},
methods: {
// 处理每页显示条数变化
handleSizeChange(val) {
this.pageSize = val;
this.loadData();
},
// 处理当前页码变化
handleCurrentChange(val) {
this.currentPage = val;
this.loadData();
},
// 加载数据
loadData() {
// 根据当前页码和每页显示的条数,从后端获取对应的数据
// 更新 this.tableData 和 this.total
}
},
created() {
this.loadData();
}
}
</script>
```
以上代码中,`tableData` 是表格的数据,`currentPage` 是当前页码,`pageSize` 是每页显示的条数,`total` 是总条数。你可以根据实际需求修改这些变量的初始值。
在 `handleSizeChange` 和 `handleCurrentChange` 方法中,你可以根据新的页码或每页显示条数,从后端获取对应的数据并更新表格。
请注意,在 `el-pagination` 组件中的 `@size-change` 和 `@current-change` 事件监听器会调用相应的方法,以处理分页组件的变化。
希望以上信息对你有所帮助!如需进一步了解,***/table
阅读全文