JS(vue iview)分页解决方案

一、解决思路

  • 使用分页组件
  • 使用组件API使组件自动生成页面数量
  • 调用组件on-change事件的返回值page
  • 将交互获得的数组存在一个数组list中
  • 通过page变量使一定数量的数据存入pageList数组中
  • 使用v-for进行数据的展示

二、具体代码实现

组件代码

<Page :total="total" show-elevator :page-size='9' class="page" @on-change="handleChange"></Page>

method代码

        handleChange(page) {
this.pageList.splice(0, this.pageList.length);
this.pageList=this.list.slice((page - 1) * 9,page * 9);
}

三、Tips

splice 与 slice 函数

splice函数

定义和用法

splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目。

注释:该方法会改变原始数组。

语法

arrayObject.splice(index,howmany,item1,.....,itemX)
参数 描述
index 必需。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。
howmany 必需。要删除的项目数量。如果设置为 0,则不会删除项目。
item1, ..., itemX 可选。向数组添加的新项目。

返回值

类型 描述
Array 包含被删除项目的新数组,如果有的话。

说明

splice() 方法可删除从 index 处开始的零个或多个元素,并且用参数列表中声明的一个或多个值来替换那些被删除的元素。

如果从 arrayObject 中删除了元素,则返回的是含有被删除的元素的数组。

定义和用法

slice() 方法可从已有的数组中返回选定的元素。

语法

arrayObject.slice(start,end)
参数 描述
start 必需。规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置。也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。
end 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数,那么它规定的是从数组尾部开始算起的元素。

返回值

返回一个新的数组,包含从 start 到 end (不包括该元素)的 arrayObject 中的元素。

说明

请注意,该方法并不会修改数组,而是返回一个子数组。如果想删除数组中的一段元素,应该使用方法 Array.splice()。

提示和注释

注释:您可使用负值从数组的尾部选取元素。

注释:如果 end 未被规定,那么 slice() 方法会选取从 start 到数组结尾的所有元素。

四、problems

调用on-change函数的返回值时出现以下三种情况

情况一

情况二

情况三

2017.10.06 21:50 project-name: ws2 Project Management system

JS(vue iview)分页解决方案的更多相关文章

  1. vue iview分页

    距离上次博客更新已经快一个月了,期间也有想法在空闲的时候更新几篇博文. 燃鹅,最近懒癌作祟,丢掉的东西越来越多,再不遏止的话就真成癌了. 趁着刚看完一篇心灵鸡汤,让打满鸡血的我总结下前段时间用到的iv ...

  2. 基于 Vue.js 之 iView UI 框架非工程化实践记要 使用 Newtonsoft.Json 操作 JSON 字符串 基于.net core实现项目自动编译、并生成nuget包 webpack + vue 在dev和production模式下的小小区别 这样入门asp.net core 之 静态文件 这样入门asp.net core,如何

    基于 Vue.js 之 iView UI 框架非工程化实践记要   像我们平日里做惯了 Java 或者 .NET 这种后端程序员,对于前端的认识还常常停留在 jQuery 时代,包括其插件在需要时就引 ...

  3. 基于 Vue.js 之 iView UI 框架非工程化实践记要

    像我们平日里做惯了 Java 或者 .NET 这种后端程序员,对于前端的认识还常常停留在 jQuery 时代,包括其插件在需要时就引用一下,不需要就删除.故观念使然,尽管 Nuget 和 Maven ...

  4. Vue + iview框架,搭建项目遇到的相关问题记录 - 国际化router.js不能实现

    例子展示: 概述: 最近在使用vue + iview框架进行web开发,并且有一个需求,需要实现web端的国际化,在完成相关配置文件后,发现router.js 中无法配置,并且会出现异常,在经过百度找 ...

  5. Vue + iView + vuex + vee-validate 完整项目总结

    build/*.js config/*.js src/旧代码文件夹 部门最近的一个新项目启动,很幸运由我来主导整个前端部分的技术选型和整体架构,项目工作量很大,但是却没有足够的人手,只有三个连CSS都 ...

  6. Atitit easyui翻页组件与vue的集成解决方案attilax总结

    Atitit easyui翻页组件与vue的集成解决方案attilax总结 ===============使用1 ===========\paggingUtil_easyui_vue.js2 C:\U ...

  7. 基于Vue封装分页组件

    使用Vue做双向绑定的时候,可能经常会用到分页功能 接下来我们来封装一个分页组件 先定义样式文件 pagination.css ul, li { margin: 0px; padding: 0px;} ...

  8. 重构MVC多条件分页解决方案

    重构MVC多条件+分页解决方案 为支持MVC的验证,无刷新查询,EF,以及让代码可读性更强一点,所以就重构了下原来的解决方案. 这里就简单讲下使用方法吧: Model: 继承PagerBase:  S ...

  9. vue+iview实现动态路由和权限验证

    github上关于vue动态添加路由的例子很多,本项目参考了部分项目后,在iview框架基础上完成了动态路由的动态添加和菜单刷新.为了帮助其他需要的朋友,现分享出实现逻辑,欢迎一起交流学习. Gith ...

随机推荐

  1. C/C++中如何计算程序运行的时间

    一个程序的功能通常有很多种方法来实现,怎么样的程序才算得上最优呢?举个例子,如果实现同一个功能的两个程序,一个一点按钮就给出运行结果,而另一个则需要漫长的时间去等待,就像安装WINDOWS XP一样( ...

  2. CSK & KCF(tracking)

    转自:http://blog.csdn.net/ben_ben_niao/article/details/51364323 上次介绍了SRDCF算法,发展历史轨迹为CSK=>>KCF/DC ...

  3. poj 3261 后缀数组 可重叠的 k 次最长重复子串

    Milk Patterns Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 16430   Accepted: 7252 Ca ...

  4. Python使用redis介绍

    一.Redis的介绍 redis是业界主流的key-value nosql 数据库之一.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).se ...

  5. [ERROR] Too many connections 尚未解决

    [ERROR] - com.alibaba.druid.support.logging.Log4j2Impl.error(Log4j2Impl.java:53) - create connection ...

  6. LintCode 402: Continuous Subarray Sum

    LintCode 402: Continuous Subarray Sum 题目描述 给定一个整数数组,请找出一个连续子数组,使得该子数组的和最大.输出答案时,请分别返回第一个数字和最后一个数字的下标 ...

  7. BestCoder Round #41 记。

    大概整个过程都是很绝望的吧. 发现自己在七点之前是肯定搞不定网了..有冲动跑到机房去打 但是又不喜欢那样的气氛 这可是shi的场呢...好难过啊... 后来..好像是在和lyd讨论怎么把网络复原的过程 ...

  8. [洛谷P1823]音乐会的等待 题解(单调栈)

    [洛谷P1823]音乐会的等待 Description N个人正在排队进入一个音乐会.人们等得很无聊,于是他们开始转来转去,想在队伍里寻找自己的熟人.队列中任意两个人A和B,如果他们是相邻或他们之间没 ...

  9. Hibernate总结之Hello,World

    1. 引入相关maven依赖: <dependency> <groupId>org.hibernate</groupId> <artifactId>hi ...

  10. 如何实用便捷的在本地真机调试WEB端HTML5网页

    先简单介绍两款常用但需要一定条件或限制的工具 1.如果你能FQ chrome在32版本后就自带了移动端调度工具,可以在Android直接联调,但唯一遗憾的是,在我大天朝要FQ后才能行的通,我自己试了后 ...