• 关于element组件中分页的一些个人思路


    最近在用element,用到了它的分页这个组件,我这边的情况是,我前端请求数据,数据大概有20个的样子,把数据存在data的一个数组里面,用一个v-for循环遍历数组内容,并用div装起来,这样20个数据就从上往下排列了出来,但是我想使用分页,一个分页只显示5个数据,那么就有4页,这个效果怎么做到呢?

    我本人也是思考了一下,主要用到里面的两个属性一个方法,属性是

    :page-size="5"
    :total="sites[0].allPages">

    sites是后台返回的json数据,且后台在数组下标为0返回的是我的一个总长度,也就是20,我这边循环是用了数组的一个slice方法让其从1开始循环,element会自动根据你的size和total生成总的

    页数,先贴我的代码

    handleCurrentChange(val) {
    var that =this;
    $.ajax({
    url: 'http://113.250.159.232:8081/Title/PrePages',
    type: 'post',
    contentType:'application/json;charset=UTF-8',
    dataType: 'json',
    data:JSON.stringify(val),
    success: function (data) {
    var json =data;
    that.sites=json;
    that.number=val;





    },
    error: function (data) {
    console.log(data);
    }
    });

    },

    这里这个方法是当你页数变化时,也就是你点1,2,3,4页时执行的函数,里面的参数val是你当前点击哪个页数的数字,我的思路是我在页数变化时发送一个ajax给后台,并把val值传给后台

    后台根据val值判断传回来的数据是哪些,但是一个bug出来了,就是这个函数是必须你点击页面角标变化时才执行,也就是我一开始页面加载完后我什么都看不到,但是我点到第二页后,数据便出来了,这个时候可以在mounted函数中一个ajax请求,并传一个数字1,因为点到第二页才生效,第一页相当于后台没有得到传过去的数据,所以没做处理,因为我在页面加载完后自动是第一页,那么我把1传给后台,后台再响应并传回原本属于1的数据,这样就完成了。但是性能方面还没有考虑,需要在后面测试的时候才知道,这也只是我本人的一个思路,希望有更好的办法的同学多多帮帮我呀哈哈哈

  • 相关阅读:
    【力扣 044】62. 不同路径
    【力扣 040】1143. 最长公共子序列
    【力扣 039】347. 前K个高频元素
    【力扣 047】63. 不同路径 II
    【力扣 038】20. 有效的括号
    【力扣 043】897. 递增顺序查找树
    SAP MM不常用移动类型之325
    SAP RETAIL 初阶之使用事务代码WRFMATCOPY创建商品主数据
    SAP RETAIL初阶之商品主数据门店视图里没有WM数据
    SAP RETAIL初阶之商品主数据WM视图
  • 原文地址:https://www.cnblogs.com/chenyuhang/p/10039752.html
Copyright © 2020-2023  润新知