如果不从后台请求数据,那么就需要在前端手动管理数据。可以使用以下步骤实现该功能:文章来源地址https://www.toymoban.com/news/detail-511455.html
- 在 Vue 组件的 data 中定义一个数组来存放所有数据(不分页)。
data() {
return {
allData: [], // 所有数据
currentPage: 1, // 当前页数
pageSize: 10, // 每页显示的条数
}
}
- 在 mounted 钩子函数中,手动获取数据并存放到上一步定义的数组中。
mounted() {
// 手动获取数据
this.allData = [
{ name: '张三', age: 18, gender: '男' },
{ name: '李四', age: 22, gender: '女' },
{ name: '王五', age: 26, gender: '男' },
// ... 其他数据
]
}
- 在模板中使用 element-ui 的表格组件来展示数据,同时使用 el-pagination 组件来实现分页。其中,表格的数据通过计算属性来获取,分页的总数需要根据数据总条数和每页显示的条数计算得出。
<template>
<div>
<el-table :data="tableData" style="width: 100%">
<el-table-column label="姓名" prop="name"></el-table-column>
<el-table-column label="年龄" prop="age"></el-table-column>
<el-table-column label="性别" prop="gender"></el-table-column>
</el-table>
<el-pagination
layout="total, sizes, prev, pager, next, jumper"
:total="total"
:page-size="pageSize"
v-model="currentPage"
></el-pagination>
</div>
</template>
<script>
export default {
data() {
return {
allData: [],
currentPage: 1,
pageSize: 10,
}
},
mounted() {
// 手动获取数据
this.allData = [
{ name: '张三', age: 18, gender: '男' },
{ name: '李四', age: 22, gender: '女' },
{ name: '王五', age: 26, gender: '男' },
// ... 其他数据
]
},
methods: {
// 获取当前页的数据
getCurrentPageData() {
const start = (this.currentPage - 1) * this.pageSize
const end = start + this.pageSize
return this.allData.slice(start, end)
},
},
computed: {
// 计算分页总数
total() {
return Math.ceil(this.allData.length / this.pageSize)
},
// 计算当前页的数据
tableData() {
return this.getCurrentPageData()
},
},
}
</script>
文章来源:https://www.toymoban.com/news/detail-511455.html
到了这里,关于vue搭配element-ui前端实现表格分页的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!