zoukankan      html  css  js  c++  java
  • Vue+element UI实现分页组件

    介绍

    这是一个是基于element-UI的分页组件基础上,进行了二次封装的分页组件,在展示数据时,该分页组件采用了每显示一页数据,只请求当前页面的数据的请求策略,从而避免了一次性将数据全部请求所造成的资源浪费。

    使用方法

    由于该组件是基于element-UI的分页组件进行二次封装,所以在使用该组件时请务必安装element-UI安装方式猛戳这里),安装好element-UI后,只需将该组件文件夹Pagination导入到现有项目中即可使用。

    示例

     1 <template>
     2   <pagination v-show="total>0" :total="total" :page.sync="page" :limit.sync="limit" @pagination="getList" />
     3 </template>
     4 <script>
     5   import Pagination from '@/components/Pagination';
     6   export default {
     7     components: { Pagination },
     8     data () {
     9       return {
    10         list:null,   //请求回来填充表格的数据   
    11         total:0,     //数据总条数 
    12         page: 1,    //默认显示第1页
    13         limit: 10   //默认一次显示10条数据
    14       }
    15     },
    16     methods:{
    17       getlist(){
    18       var start = (this.page - 1) * this.limit;
    19       var end   = this.page * this.limit;
    20       this.$axios.get(url + '?start=' + start + '&end=' + end)
    21         .then(response => {
    22               this.list = response.data.items;
    23               this.total = response.data.total;
    24               resolve();
    25         }).catch(err => {
    26           reject(err);
    27         })
    28     }
    29     }
    30   }
    31 </script>

    选项

    属性描述类型默认值是否必须
    total 数据总数 Number 0
    page 当前页码 Number 1
    limit 每页显示数据条目个数 Number 10
    pageSizes 每页显示个数选择器的选项设置 Array [10,20,30]
    layout 组件布局 String 'total, sizes, prev, pager, next, jumper'
    background 是否为分页按钮添加背景色 Boolean true

    效果图

     

    完整代码请戳☞Vue-Components-Library/Pagination/

    (完)

  • 相关阅读:
    道路计划猿练级(笔者:陈浩)
    OpenCV——Delaunay三角 [转载]
    mysql声明摘要
    JDBC公共动作类
    Android SharedPreferences复杂的存储
    SAP ABAP规划 SY-REPID与SY-CPROG差额
    在我的眼里,生产主管(1)——如何做竞争分析
    Oracle生成查询包括对应于所有数据表记录语句中指定的字段名
    SDUT 2894-C(最短spfa)
    人脉的本质
  • 原文地址:https://www.cnblogs.com/wangjiachen666/p/9545456.html
Copyright © 2011-2022 走看看