vue 使用 element 分页控制 table表格 数据
先上代码
<template>
<div>
<el-table :data="tableData.slice((page - 1) * limit, page * limit)" 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="page" :page-sizes="PageNumber" :page-size="limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
</el-pagination>
</div>
</template>
<script>
export default {
data() {
return {
// 总数据
tableData: [
{
date: '2016-05-02',
name: 'asdf',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
},
{
date: '2016-05-01',
name: 'zxcv',
address: '上海市普陀区金沙江路 1519 弄'
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
},
{
date: '2016-05-03',
name: 'fdds',
address: '上海市普陀区金沙江路 1516 弄'
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
},
{
date: '2016-05-03',
name: 'qweqwe',
address: '上海市普陀区金沙江路 1516 弄'
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
},
{
date: '2016-05-03',
name: 'fdghfh',
address: '上海市普陀区金沙江路 1516 弄'
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
},
{
date: '2016-05-03',
name: 'sdfsdf',
address: '上海市普陀区金沙江路 1516 弄'
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
},
{
date: '2016-05-03',
name: 'sdgdfg',
address: '上海市普陀区金沙江路 1516 弄'
}
],
// 默认显示第几页
page: 1,
// 总条数, 根据接口获取数据长度(注意: 这里不能为空)
total: 50,
// 每页显示个数选择器的选项设置
PageNumber: [1, 2, 3, 4, 5],
// 每页显示条目个数
limit: 5
}
},
methods: {
// limit 改变时会触发
handleSizeChange(val) {
// 改变每页显示的条数
this.limit = val
// 注意:在改变每页显示的条数时,要将页码显示到第一页
this.page = 1
},
// page 改变时会触发
handleCurrentChange(val) {
// 改变默认的页数
this.page = val
}
}
}
</script>
效果展示
vue 分页的使用 复制直接可用, 给个评论呗!
分类:
做项目时 vue 常遇问题
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)