Vue 实用分页组件paging（页数太多时显示省略号）

andycall 发布于2019-08-29 12:24 / 753人阅读

摘要：年更新之前的版本在页数太多时依然每一页都显示，这显然不合理。增强版在页数太多时会显示省略号，且把分页组件多带带提取出来，可以直接在其他页面引入使用。用下来还是的做法方便一些，不需要绕一下子了。总页数当前页页面初始化函数参考文章

2017年6.26更新：

之前的版本在页数太多时依然每一页都显示，这显然不合理。增强版在页数太多时会显示省略号，且把分页组件多带带提取出来，可以直接在其他页面引入使用。代码见： Paging.vue

也可以直接在JSfiddle中查看实现

—————————————下面是之前的版本————————————

直接上代码。只有一个小小的需要注意的点：vue1.x的v-for循环是从0开始，遵从了程序语言设计的一贯的做法，而vue2.x是从1开始的，符合我们平常的习惯。用下来还是vue2.x的做法方便一些，不需要绕一下子了。

你也可以直接在jsfiddle中查看。

//html

prev

next

//js
var paging = new Vue({
  el: "#paging",
  data: {
    sum: 4, //总页数
    curPage: 1, //当前页
  },
  methods: {
    getBooks: function(page){
      //页面初始化函数
    },
    switchPage: function(page){
      var vm = this;
      if(page < 1) {
        page = 1;
      } else if(page > vm.sum) {
        page = vm.sum;
      }
      vm.getBooks(page);
      vm.curPage = page;
    },
  }
})

//css
span {
  display: inline-block;
  margin: 3px;
  width: 35px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  color: pink;
  background: #fff;
  border-radius: 5px;
}
span.current-page,
span:hover {
  color: #fff;
  background: pink;
}

参考文章：
https://segmentfault.com/a/11...

超融合服务器 idc机房托管 vue组件 html省略显示 vue组件开发 vue父子组件通讯

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111867.html

Vue 实用分页组件paging（页数太多时显示省略号）

摘要：年更新之前的版本在页数太多时依然每一页都显示，这显然不合理。增强版在页数太多时会显示省略号，且把分页组件单独提取出来，可以直接在其他页面引入使用。用下来还是的做法方便一些，不需要绕一下子了。总页数当前页页面初始化函数参考文章 2017年6.26更新：之前的版本在页数太多时依然每一页都显示，这显然不合理。增强版在页数太多时会显示省略号，且把分页组件单独提取出来，可以直接在其他页面引入使...

cnio 2019-08-20 15:41 评论0 收藏0
Vue 实用分页组件paging（页数太多时显示省略号）

摘要：年更新之前的版本在页数太多时依然每一页都显示，这显然不合理。增强版在页数太多时会显示省略号，且把分页组件单独提取出来，可以直接在其他页面引入使用。用下来还是的做法方便一些，不需要绕一下子了。总页数当前页页面初始化函数参考文章 2017年6.26更新：之前的版本在页数太多时依然每一页都显示，这显然不合理。增强版在页数太多时会显示省略号，且把分页组件单独提取出来，可以直接在其他页面引入使...

ShevaKuilin 2019-08-01 16:40 评论0 收藏0
手把手教你用原生JavaScript造轮子（1）——分页器（最后更新：Vue插件版本，本篇Over！

摘要：使用构造函数那么有没有一种办法，可以不写函数名，直接声明一个函数并自动调用它呢答案肯定的，那就是使用自执行函数。日常工作中经常会发现有大量业务逻辑是重复的，而用别人的插件也不能完美解决一些定制化的需求，所以我决定把一些常用的组件抽离、封装出来，形成一套自己的插件库。同时，我将用这个教程系列记录下每一个插件的开发过程，手把手教你如何一步一步去造出一套实用性、可复用性高的轮子。 So, ...

CHENGKANG 2019-08-23 10:22 评论0 收藏0
一个通用的vue的表格组件

摘要：在做业务组件的时候需要自己自己封装一个通用的表格，这个表格需要符合我们一切的好的幻想，左右固定，表头固定，分页，选择，一直表格内容的行数限制等等，下面就为大家介绍一下这一款表格组件功能以及怎么使用。在做业务组件的时候需要自己自己封装一个通用的表格，这个表格需要符合我们一切的好的幻想，左右固定，表头固定，分页，选择，一直表格内容的行数限制等等，下面就为大家介绍一下这一款表格组件功能以及...

caoym 2019-08-21 16:49 评论0 收藏0
一个通用的vue的表格组件

摘要：在做业务组件的时候需要自己自己封装一个通用的表格，这个表格需要符合我们一切的好的幻想，左右固定，表头固定，分页，选择，一直表格内容的行数限制等等，下面就为大家介绍一下这一款表格组件功能以及怎么使用。在做业务组件的时候需要自己自己封装一个通用的表格，这个表格需要符合我们一切的好的幻想，左右固定，表头固定，分页，选择，一直表格内容的行数限制等等，下面就为大家介绍一下这一款表格组件功能以及...

bingo 2019-08-05 12:09 评论0 收藏0