效果图：

直接使用element操作很简单，记录一下要点：

根据ele提供的api修改data

v-for="(i,s) in dataView.slice((currentPage-1)*PageSize,currentPage*PageSize)"
如果数据在其他功能需要被修改，可以修改并储存data
this.dataView = data    //经筛选的页面展示数据
this.total = this.dataView.length

vue的pc端项目+element实现分页效果的更多相关文章

  1. 曾经的pc端项目踩到的一些兼容性的坑及其解决方案

    曾经公司pc端项目一直最低兼容到IE7,要求和chrome下浏览效果一致,真心坑坏了我和另外一个小伙伴(另一个小伙伴以前也没处理过兼容问题).不过还好,在这里真心感谢鑫哥博客的详解,从底层原理讲到了具 ...

  2. vue实现PC端分辨率适配

    lib-flexible + px2rem Loader lib-flexible 阿里伸缩布局方案 px2rem-loader:px转rem: 依赖 首先需要安装 vue-cli 脚手架,这里我安装 ...

  3. vue实现PC端调用摄像头拍照人脸录入、移动端调用手机前置摄像头人脸录入、及图片旋转矫正、压缩上传base64格式/文件格式

    进入正题 1. PC端调用摄像头拍照上传base64格式到后台,这个没什么花里胡哨的骚操作,直接看代码 (canvas + video) <template> <div> &l ...

  4. Vue实际中的应用开发【分页效果与购物车】

    作者 | Jeskson 来源 | 达达前端小酒馆 分页组件 首先来创建项目: 分页组件,做项目不要写动手写代码,要想想业务逻辑,怎么写,如何写才是最好的呈现方式,做项目不急,要先想好整体的框架,从底 ...

  5. vue PC端项目中解决userinfo问题

    在vue2 中用脚手架建立的项目,后端提供接口获取数据.在公司做第一个项目的时候不清楚公司里的对接流程,结果后续代码被一个接口整的乱七八糟,这个接口是获取用户信息的接口——'usre/info'. 如 ...

  6. vue新建移动端项目模板

    vue移动端模板 tip: 1.ui我们使用的是vux,庆幸的是,解决了打包过大的问题, 2.这里使用的是rem布局,移动端还是要使用ipad和不同尺寸的手机 3.版本:webpack:3.6.0   ...

  7. pc端的企业网站（IT修真院test9）详解一个响应式完成的pc端项目

    一:引入bootstrap框架 昨天一直被bootstrap栅格系统折磨. why? 我本来想一边码字,一边学习栅格布局的.but不成功.这时我头脑已经昏了. 下午,我查看了bootstrap的官网, ...

  8. vue实现pc端上拉加载功能，不兼容移动端

    所用插件:Mock.js 这个只用到它简单的功能,拦截ajax请求. vue和axios,vue基础知识请看文档. axios类似于jquery的ajax方法. 以下是是该功能所有代码,其中mock的 ...

  9. 【angularjs】使用angular搭建PC端项目，开关按钮

    方法一(使用指令) 1.指令(angular-ui-switch.js) angular.module('uiSwitch', []) app.directive('switch', function ...

  10. vue实现pc端无限加载功能

    主要思路通过自定义指令,在视图初始化完成后,绑定scroll事件.当scrollTop + clientHeight >= scrollHeight时(此时滚定条到了底部)触发loadMore事 ...

随机推荐

  1. Java freemarker 模板生成word动态表格

    1.新建一个word文档 2.把调整完的word另存为xml格式: 3.使用文本编辑器打开 4.xml格式化XML 在线格式化 | 菜鸟工具菜鸟工具-XML 在线格式化..https://c.runo ...

  2. 跳转到制定Sheet页及提交指定sheet页内容

    一.跳转到指定Sheet的实现 话不多说,先上效果图 两个按钮的事件分别如下: _g().loadSheetByName("sheet1") # 跳转至sheet1按钮事件 _g( ...

  3. 【Java面试题】Mybatis

    五.MyBatis 40)谈谈 MyBatis Mybatis 是一个半自动化的 ORM 框架,它对 jdbc 的操作数据库的过程进行封装,使得开发者只需要专注于 SQL 语句本身,而不用去关心注册驱 ...

  4. Scala 可变数组ArrayBuffer

    1 package chapter07 2 3 import scala.collection.mutable 4 import scala.collection.mutable.ArrayBuffe ...

  5. .NET 8使用日志功能以及自定义日志提供程序

    .NET 8使用日志功能以及自定义日志提供程序 日志级别 下表列出了 LogLevel 值.方便的 Log{LogLevel} 扩展方法以及建议的用法: 展开表 LogLevel "值&qu ...

  6. XML 简介及用法详解

    XML 是一种用于存储和传输数据的与软件和硬件无关的工具. 什么是XML? XML代表eXtensible Markup Language(可扩展标记语言).XML是一种与HTML非常相似的标记语言. ...

  7. 如何使用ODBC应用程序接口连接数据库

    如何使用 ODBC 应用程序接口连接数据库? 安装 unixODBC. yum install -y unixODBC yum install -y unixODBC-devel 下载并安装 open ...

  8. 动态规划（五）——坐标dp

    传纸条 题目描述 小渊和小轩是好朋友也是同班同学,他们在一起总有谈不完的话题.一次素质拓展活动中,班上同学安排做成一个m行n列的矩阵, 而小渊和小轩被安排在矩阵对角线的两端,因此,他们就无法直接交谈了 ...

  9. MVC如何创建区域

    前言 MVC 划分区域可以为项目成立不同的小模块,方便团队之间开发,与增强项目结构的清晰度. 正文 建立区域: 在areas里面建立区域.,然后填写命名. 然后区域注册即可: 但是这样做依然无法解决项 ...

  10. 力扣595(MySQL)-大的国家（简单）

    题目: World 表: 如果一个国家满足下述两个条件之一,则认为该国是 大国 : 面积至少为 300 万平方公里(即,3000000 km2),或者人口至少为 2500 万(即 25000000)编 ...