现在又20条数据 ,使用vue2+elelmentui,写一个table表格 ,然后分页展示,每页最多展示5条数据,且显示一共有多少条数据,第几页,共几页
时间: 2024-05-02 18:22:16 浏览: 24
以下是一个简单的实现:
```html
<template>
<div>
<el-table :data="tableData" stripe>
<el-table-column prop="id" label="ID"></el-table-column>
<el-table-column prop="name" label="Name"></el-table-column>
<el-table-column prop="age" label="Age"></el-table-column>
</el-table>
<el-pagination
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-size="pageSize"
layout="total, prev, pager, next"
:total="totalRows"
></el-pagination>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{ id: 1, name: 'John', age: 20 },
{ id: 2, name: 'Alice', age: 25 },
{ id: 3, name: 'Bob', age: 30 },
{ id: 4, name: 'Cathy', age: 35 },
{ id: 5, name: 'David', age: 40 },
{ id: 6, name: 'Emily', age: 45 },
{ id: 7, name: 'Frank', age: 50 },
{ id: 8, name: 'Grace', age: 55 },
{ id: 9, name: 'Henry', age: 60 },
{ id: 10, name: 'Ivy', age: 65 },
{ id: 11, name: 'Jack', age: 70 },
{ id: 12, name: 'Kate', age: 75 },
{ id: 13, name: 'Linda', age: 80 },
{ id: 14, name: 'Mike', age: 85 },
{ id: 15, name: 'Nancy', age: 90 },
{ id: 16, name: 'Oliver', age: 95 },
{ id: 17, name: 'Peter', age: 100 },
{ id: 18, name: 'Queen', age: 105 },
{ id: 19, name: 'Rose', age: 110 },
{ id: 20, name: 'Sam', age: 115 },
],
currentPage: 1,
pageSize: 5,
};
},
computed: {
totalRows() {
return this.tableData.length;
},
totalPages() {
return Math.ceil(this.totalRows / this.pageSize);
},
},
methods: {
handleCurrentChange(currentPage) {
this.currentPage = currentPage;
},
},
};
</script>
```
注意,这里使用了 `computed` 属性来计算总共有多少行和多少页。在 `handleCurrentChange` 方法中,我们只需要更新当前页码即可。同时,我们使用了 `el-pagination` 组件来展示分页信息,其中 `layout` 属性用来控制分页组件的显示方式,`total` 属性用来显示总共有多少行数据。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)