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 分页的使用 复制直接可用， 给个评论呗！
