zoukankan      html  css  js  c++  java
  • 关于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的数据,这样就完成了。但是性能方面还没有考虑,需要在后面测试的时候才知道,这也只是我本人的一个思路,希望有更好的办法的同学多多帮帮我呀哈哈哈

  • 相关阅读:
    attachEvent 中this指向
    JS window.name跨域封装
    【javascript基础】8、闭包
    【javascript基础】7、继承
    【javascript基础】6、new与构造函数
    【javascript基础】5、创建对象
    【javascript基础】4、原型与原型链
    【javascript基础】3、变量和作用域
    【javascript基础】2、函数
    【javascript基础】1、基本概念
  • 原文地址:https://www.cnblogs.com/chenyuhang/p/10039752.html
Copyright © 2011-2022 走看看