vue2中table表格数据 饿了吗分页功能
时间: 2024-03-01 21:49:42 浏览: 18
在Vue2中,如果你使用了饿了么团队开发的 Element UI 组件库,那么你可以使用它提供的 <el-pagination> 组件来实现分页功能。
首先,你需要引入 Element UI 的样式文件和 JavaScript 文件。在 Vue 组件中,你可以使用如下代码来引入 Element UI:
```
import 'element-ui/lib/theme-chalk/index.css';
import { Pagination } from 'element-ui';
```
接着,在你的组件模板中,你需要使用 <el-table> 和 <el-pagination> 组件来展示表格数据和分页器。代码示例:
```
<template>
<div>
<el-table :data="tableData" border>
<el-table-column prop="name" label="Name"></el-table-column>
<el-table-column prop="age" label="Age"></el-table-column>
<el-table-column prop="address" label="Address"></el-table-column>
</el-table>
<el-pagination
:total="total"
:current-page="currentPage"
:page-size="pageSize"
@current-change="handleCurrentChange"
></el-pagination>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: 'John', age: 18, address: 'New York' },
{ name: 'Alice', age: 22, address: 'London' },
{ name: 'Bob', age: 30, address: 'Paris' },
// more data
],
total: 50, // 总条数
currentPage: 1, // 当前页码
pageSize: 10, // 每页条数
};
},
methods: {
handleCurrentChange(val) {
this.currentPage = val;
// 更新表格数据
// ...
},
},
components: {
ElPagination: Pagination,
},
};
</script>
```
在上面的代码中,我们使用了 <el-table> 组件展示表格数据,然后使用 <el-pagination> 组件实现分页功能。其中:
- :data="tableData" 表示将 tableData 数组作为表格数据源。
- :total="total" 表示总条数。
- :current-page="currentPage" 表示当前页码。
- :page-size="pageSize" 表示每页显示的条数。
- @current-change="handleCurrentChange" 表示当分页器的当前页码发生改变时,触发 handleCurrentChange 方法。
在 handleCurrentChange 方法中,我们可以根据当前页码和每页显示的条数,重新获取数据并更新表格数据。
以上就是使用 Element UI 实现表格分页功能的基本步骤。