​​​​​​​基于el-table和el-pagination实现数据的分页效果流程详解

一、效果图

二、方法

第一步,新建一个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>
作者:Sca_杰原文地址:https://blog.csdn.net/weixin_42966151/article/details/128035510

%s 个评论

要回复文章请先登录注册