当在使用Element的组件时,对于数据量较大的返回数据总是会卡顿,这时则需要进行分页。
Oracle可以使用 Rownum
Mysql 则是limit
Sqlserve 使用 between and
接下来继续介绍前台页面如何分页,拿下拉列表举个栗子(其他也可以,此方法通用)
首先是官网的下拉列表,可以看出并没有自带分页的功能,这时就需要找自定义分页
我比较喜欢这种的,可以让使用者看到总条数,当然,其他的也可以,大同小异
接下来就是书写拼接
声明总页数和当前页的初始值
以上是方法,直接调用即可
<el-pagination
class="ele-pagination"
@current-change="getQuery"
:page-size="100"
layout="total, prev, pager, next"
:total="total"
>
</el-pagination>
total: 0,
current: 1,
/**
* 翻页
*/
getQuery(val) {
this.current = val;
this.getLab();
},
/**
* 获取检验项目选项
*/
getLab(code, name) {
api
.post(
"请求后端url",
Object.assign({
NAME: name,
CODE: code,
current: (this.current - 1) * 100,--这里是分页的
pageSize: (this.current - 1) * 100 + 100,--
})
)
.then((res) => {
if (res != null && res != "" && res != "" && res != undefined) {
res[res.length] = [];--因为使用分页控件定位在下面后会遮挡一部分,所以给一个空的让他遮挡
this.total = res[0].count;--赋值总条数,这里我在后台查过了
……
示例图:
对了,还有一个定位的css代码
.ele-pagination {
position: absolute;
bottom: 0;
left: 0;
height: 40px;
line-height: 40px;
background: #fff;
text-align: center;
width: 100%;
box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.1);
}
自行搭配使用,分享技术交流