基于el-table和el-pagination实现数据的分页效果流程详解
Sca_杰 人气:0一、效果图
二、方法
第一步，新建一个el-table，进行如下配置，
:data=>是用于动态json数据赋值给table，
:header-cell-style=>是设置表头的样式，
stripe=>是让table具有斑马背景色，便于观看。
<el-table :data="tableData"
:header-cell-style="{background:'#eaeaea'}" stripe>
<el-table-column prop="date" label="日期" width="140">
</el-table-column>
<el-table-column prop="name" label="姓名" width="120">
</el-table-column>
<el-table-column prop="job" label="职业" width="120">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
</el-table>第二步，新建一个el-pagination，
@size-change和@current-change=>处理页码大小和当前页变动时候触发的事件,
:current-page=>当前第几页
:page-sizes=>每页显示多少条数据的选择项
:page-size=>每页显示多少条数据
layout=>页码布局(一下是完整版)
:total=>数据总数
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 20, 50, 100]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="tableData.length">
</el-pagination>第三步，配置展示的数据
data () {
return {
currentPage: 1,
pageSize: 10,
tableData: [
{
date: '2016-05-02',
name: '橘右京',
job: '刺客',
address: '上海市普陀区金沙江路 1518'
},
{
date: '2016-05-15',
name: '鲁班大师',
job: '辅助',
address: '上海市普陀区金沙江路 1516'
}
]
}
}第四步，配置点击事件
methods: {
// @size-change页码展示数量点击事件
handleSizeChange (val) {
// 更新每页展示数据size
this.pageSize = val
},
// @current-change页码点击事件
handleCurrentChange (val) {
// 更新当前页数是第几页
this.currentPage = val
}
}第五步，这时候现实的数据是全部显示的，还需要实时修改显示哪些数据，修改el-table中的:table，如下即可。
:data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
到了这里就已经成功实现了，以下是完整代码：
<template>
<div class="block">
<p>共<span style="color: #ffd04b">{{tableData.length}}</span>条数据</p>
<el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
:header-cell-style="{background:'#eaeaea'}" stripe>
<el-table-column prop="date" label="日期" width="140">
</el-table-column>
<el-table-column prop="name" label="姓名" width="120">
</el-table-column>
<el-table-column prop="job" label="职业" width="120">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 20, 50, 100]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="tableData.length">
</el-pagination>
</div>
</template>
<script>
export default {
name: 'test2',
methods: {
// @size-change页码展示数量点击事件
handleSizeChange (val) {
// 更新每页展示数据size
this.pageSize = val
},
// @current-change页码点击事件
handleCurrentChange (val) {
// 更新当前页数是第几页
this.currentPage = val
}
},
data () {
return {
currentPage: 1,
pageSize: 10,
tableData: [
{
date: '2016-05-02',
name: '橘右京',
job: '刺客',
address: '上海市普陀区金沙江路 1518'
},
{
date: '2016-05-03',
name: '娜可露露',
job: '刺客',
address: '上海市普陀区金沙江路 1517'
},
{
date: '2016-05-04',
name: '鲁班七号',
job: '射手',
address: '上海市普陀区金沙江路 1519'
},
{
date: '2016-05-05',
name: '云中君',
job: '刺客',
address: '上海市普陀区金沙江路 1516'
},
{
date: '2016-05-06',
name: '干将莫邪',
job: '法师',
address: '上海市普陀区金沙江路 1516'
},
{
date: '2016-05-07',
name: '不知火舞',
job: '法师',
address: '上海市普陀区金沙江路 1516'
},
{
date: '2016-05-08',
name: '沈梦溪',
job: '法师',
address: '上海市普陀区金沙江路 1516'
},
{
date: '2016-05-09',
name: '百里守约',
job: '刺客',
address: '上海市普陀区金沙江路 1516'
},
{
date: '2016-05-10',
name: '马可波罗',
job: '射手',
address: '上海市普陀区金沙江路 1516'
},
{
date: '2016-05-11',
name: '孙尚香',
job: '射手',
address: '上海市普陀区金沙江路 1516'
},
{
date: '2016-05-12',
name: '赵云',
job: '刺客',
address: '上海市普陀区金沙江路 1516'
},
{
date: '2016-05-13',
name: '钟无艳',
job: '战士',
address: '上海市普陀区金沙江路 1516'
},
{
date: '2016-05-14',
name: '杨玉环',
job: '法师',
address: '上海市普陀区金沙江路 1516'
},
{
date: '2016-05-15',
name: '鲁班大师',
job: '辅助',
address: '上海市普陀区金沙江路 1516'
}
]
}
}
}
</script>加载全部内容