绳锯木断,水滴石穿!
Web > elementui分页实现

elementui分页实现

2020-11-02 分类:Web 作者:Agoni 阅读(687)

根据之前写的代码剥离分析得出:
data传入参数:

1
2
3
page:1, //当前页
limit:10, //每页默认显示条数
total:0, //总条数


//函数部分代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
getlist(){
    $.ajax({
        type:'post',
        dataType:'json',
        data:{
            page:this.page,
            limit:this.limit,
        },
        url:"{:U('Retail/auth/bothauth')}",
        success:function(res){
            app.tableData = res.res; //tabledata是vue中的循环数据数组
            app.total = res.counts;//总条数
        }
    });
},

//在created里面运行上述函数,首先查询第一页
created(){
    this.getlist();
},

后台部分代码如下(thinkphp3版本):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
public function bothauth()
{
    $page = I('param.page');
    $limit = I('param.limit');

    $info = D('Auth')->both($page,$limit);
    $counts = M('food_auth')->count();

    $arr = array(
        'res'=>$info,
        'counts'=>(int)($counts),
    );
    $this->ajaxReturn($arr);

}

html部分代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<el-pagination
    background
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :pager-count="5"
    :page-sizes="[5,10,20,30]"
    :page-size="10"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total">
</el-pagination>

/* 切换每页数量 */
handleSizeChange(val) {
    // console.log(val);
    this.limit = val;
    this.page = 1;
    this.getlist();
},

/* 切换页数 */
handleCurrentChange(val) {
    // console.log(val);
    this.page = val;
    this.getlist();
},

至此......

「 有志者自有千计万计,无志者只感千难万难 」

赞(4) 打赏
4

谢谢,共同进步~

支付宝
微信
标签:

上一篇:

下一篇:

你可能感兴趣

0 条评论关于"elementui分页实现"

博客简介

loading......
姓名:张峰
性别:男
爱好:女
喜欢:旅游,煲剧,写书法,写博客,欢迎一起交流。。。。。。

精彩评论

友情链接

没有人陪你走一辈子,所以你要适应孤独,没有人会帮你一辈子,所以你要奋斗一生!申请交换友链

站点统计

  • 文章总数: 24 篇
  • 草稿数目: 0 篇
  • 分类数目: 10 个
  • 独立页面: 1 个
  • 评论总数: 21 条
  • 链接总数: 3 个
  • 标签总数: 26 个
  • 访问总量: 8074606 次
  • 最近更新: 2021年10月13日
服务热线:
 1995****175

 QQ在线交流

 旺旺在线