一、前言
当table的数据量比较大的时候。一个屏幕展示不出全部的数据,这个时候就需要分页查询来做了,因为我做的这个项目数据量比较小,所以就使用<el-pagination>做了Vue前端分页。
二、开始上代码
2.1了解 el-pagination 怎么使用
官网关于分页的介绍:https://element.eleme.cn/2.12/#/zh-CN/component/pagination
下面的就是官网的一个全部功能的例子,我做了一些整理:
<template>
<div>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[100, 200, 300, 400]"
:page-size="100"
layout="total, sizes, prev, pager, next, jumper"
:total="400">
</el-pagination>
</div>
</template>
<script>
export default {
methods: {
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
}
},
data() {
return {
currentPage: 4
};
}
}
</script>
2.2分页的实际应用
代码部分如下:
<template>
<div>
<el-table :data="DictData.slice((dictCurrentPage-1)*dictPageSize,dictCurrentPage*dictPageSize)">
<el-table-column prop="dictId" label="id" width="50"></el-table-column>
<el-table-column prop="dictName" label="字典名称" width="120"></el-table-column>
<el-table-column prop="dictKey" label="字典key" width="200"></el-table-column>
<el-table-column prop="dictTypeKey" label="字典类型key" width="150"></el-table-column>
</el-table>
<el-pagination class="fy"
@size-change="bzjSizeChange"
@current-change="bzjCurrentChange"
layout="sizes, prev, pager, next, total"
:current-page.sync="dictCurrentPage"
:total="dictTotal"
background
:page-sizes="[5, 10, 15, 20]"
:page-size.sync="dictPageSize"
>
</el-pagination>
</div>
</template>
<script>
import { getRequest } from '../utils/api'
export default {
name: "DictManage",
data() {
return {
dictTotal:0,
dictCurrentPage:1,
dictPageSize:5,
DictData: [],
}
},
methods: {
initDict(){
getRequest("/api/dict/getAll")
.then(rsp => {
//console.log(rsp.data.rtData.rows);
this.DictData = rsp.data.rtData.rows;
this.dictTotal = this.DictTypeData.length;
})
},
bzjSizeChange(val) {
this.dictPageSize=val
},
bzjCurrentChange(val) {
this.dictCurrentPage=val
},
},
mounted() {
this.initDict();
}
}
</script>
<style scoped>
.fla {
float: left;
margin-right: 15px !important;
margin-left: 5px;
}
</style>
注:在el-table标签中的data属性绑定的值要经过分页计算0.0
重点就是这句!!!