精华内容
下载资源
问答
  • vue 实现分页加载数据

    2018-05-07 17:32:00
    数据量较大时,比如加载一些商品由于商品条目过多,不可能一下就把数据加载完。...判断数据是否重复:则添加,有就不添加。否则点击会无限加载数据 https://www.jianshu.com/p/ddb31f19b5dc 转...

    当数据量较大时,比如加载一些商品由于商品条目过多,不可能一下就把数据加载完。导致数据数据加载过慢,用户体验极差。

    这时需要实现分页加载:

    1:定义一个点击事件

    2:定义page

    3:

     

     4:

    5:

    desc:

    判断数据是否重复:无则添加,有就不添加。否则点击会无限加载数据

     https://www.jianshu.com/p/ddb31f19b5dc

    转载于:https://www.cnblogs.com/sww-blog/p/8990622.html

    展开全文
  • vue分页

    2020-10-28 16:54:04
    因某原因,后端一次性返回所有数据无分页字段,只能自己实现假分页。 需要准备俩个数组。一个展示,一个分割 最初获取数据的时候 if(this.tableData.length > 0){ let temp = JSON.stringify(this.tableData...

    因某原因,后端一次性返回所有数据,无分页字段,只能自己实现假分页。
    需要准备俩个数组。一个展示,一个分割
    组件

      <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[3, 10, 300, 400]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalPage"
            >
            </el-pagination>
          </div>
    
     			// 总数据就是总页数
    			this.totalPage = this.list.length
                // 给加分页列表初始化
                let temp = JSON.parse(JSON.stringify(this.list))
                // 因为splice不是纯函数会改变源数据结果这里temp一下,记得Stringify不然也会改变源数据
                this.pageList =  temp.splice(0,this.pageSize)
    

    在这里插入图片描述

        handleSizeChange(val) {
          // 只要换页数就直接返回1页
          this.pageSize = val;
          this.currentPage = 1;
          this.pageList = this.list.slice(0, this.pageSize);
        },
        handleCurrentChange(val) {
          this.currentPage = val;
          if (val == 1) {
            this.pageList = this.list.slice(0, this.pageSize);
            return;
          }
          // 当前页 - 1 * 页数 = 分割开始数 比如二页 - 1  = 1*page
          val = (val - 1) * this.pageSize;
          // 分割结束数 = 分割开始数 + this.pageSize
          this.pageList = this.list.slice(val, val + this.pageSize);
        },
    
    展开全文
  • 总页数分页组件概述显示原理组件模板js部分组件接受参数计算属性css样式效果展示 概述 在项目中遇到一个返回结果不包含总页数,通过预计后面还有的页数来进行分页显示的需求,利用iview的分页组件样式自己制作了一...

    概述

    在项目中遇到一个返回结果不包含总页数,通过预计后面还有的页数来进行分页显示的需求,利用iview的分页组件样式自己制作了一个分页组件,记录一下。

    显示原理

    组件不需要数据的总页数,通过传入当前页后预查询包含数据的页数进行显示,其中最大预查询页数与组件最多显示页码数相同,当前页显示时向最多可显示页码数中间靠拢。

    例:
    假设共有100条数据,每页显示10条,最多显示5个页码。
    查询第1-5页时,传入参数5;
    查询第6页时,传入参数4;
    查询第7页时,传入参数3;
    查询第8页时,传入参数2;
    查询第9页时,传入参数1;
    查询第10页时,传入参数0;

    组件模板

    直接采用了iview相关的样式类和element-ui选择器,包含总条数显示以及每一页行数选择,具体样式可具体修改。

    <template>
      <div style="margin: 10px;">
        <ul class="ivu-page mini" style="float: right">
          <span class="ivu-page-total" v-if="totals !== undefined">{{totals}}</span>
          <li title="上一页" class="ivu-page-prev" :class="{ 'ivu-page-disabled': current == 1 }" 
          @click="setPage(current - 1)">
            <a><i class="ivu-icon ivu-icon-ios-arrow-left"></i></a>
          </li>
          <li v-for="item in pageList" :title="item" class="ivu-page-item my_page_item" 
          :class="{ 'ivu-page-item-active': item == current }" @click="setPage(item)">
            <a>{{item}}</a>
          </li>
          <li title="下一页" class="ivu-page-next" :class="{ 'ivu-page-disabled': nextPages <= 0 }" 
          @click="setPage(current + 1)">
            <a><i class="ivu-icon ivu-icon-ios-arrow-right"></i></a>
          </li>
          <div class="ivu-page-options">
            <el-select v-model="rows" style="width:100px;margin-right: 10px" size="mini" @change="changeSize">
              <el-option v-for="item in pageSize" :value="item.value" :label="item.label" :key="item.value">
              </el-option>
            </el-select>
          </div>
        </ul>
      </div>
    </template>
    

    js部分

    组件接受参数

    flag:true/false。表格刷新标志,从组件外部修改时自动跳转至第一页
    advance:分页组件可显示的最大页码数
    nextPages:当前页后包含数据的页数,核心参数
    sizeOpts:切换每页条数的配置
    totals:数据总条目数,可选

    计算属性

    pageList:计算并返回当前组件显示的所有页码数
    pageSize:计算显示每页条数配置

    <script>
      export default {
        props: ['flag','advance','nextPages', 'sizeOpts', 'totals'],
        data () {
          return {
            current: 1,//当前页码
            pageClicked: 1,//点击页码
            rows: 10,
            sizeList: [10, 20, 30, 40],
          }
        },
        computed: {
          pageList() {
            let list = [];
            let current = this.current, next = this.nextPages; // current 当前页码,next 后续页码
            let length, head;
            if (current > this.advance / 2) {
              head = current - Math.floor(this.advance / 2);
              if (next >= Math.floor(this.advance / 2)) {
                length = this.advance;
              } else {
                length = next + Math.floor(this.advance / 2) + 1;
              }
            } else {
              head = 1;
              if (next + current >= this.advance) {
                length = this.advance;
              } else {
                length = next + current;
              }
            }
            for (let i = 1; i <= length; i++) {
              list.push(head++);
            }
            return list;
          },
          pageSize() {
            let list = [];
            let sizes = this.sizeOpts != null? this.sizeOpts: this.sizeList;
            this.rows = sizes[0];
            for (let i = 0; i < sizes.length; i++) {
              let option = new Object();
              option.value = sizes[i];
              option.label = sizes[i] + ' 条/页';
              list.push(option);
            }
            return list;
          },
          currentChange(){
            return {
              current:this.pageClicked,
              sizeCurrent:this.rows
            }
          },
          flagChange(){
            return this.flag;
          },
        },
        watch: {
          currentChange(res){
            this.$emit('pageChanged',res);
          },
          flagChange(res){
            this.pageClicked = 1;
          },
        },
        methods: {
          setPage(id) {//
            if (this.pageList.indexOf(id) > -1) {
              this.pageClicked = id;
            }
          },
          changeSize(value) {
            this.pageClicked = 1;
          },
          setCurrent(value) {
            this.current = value;
          }
        }
      }
    </script>
    

    css样式

    <style scoped>
    a i {
      cursor: pointer;
    }
    .my_page_item {
      margin: 0 2px !important;
    }
    </style>
    

    效果展示

    点击各页码显示效果。
    初始分页
    中间分页
    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • 数据进行查询时,后台返回的数据是空。原因是:当前页码为第二页。所以向后台发送请求的pageNumber=2,当pageNumber=1时。就可以查询到数据了。 所以在请求数据时,判断搜索框是否有值,如果有值,把当前...

    开发过程中发现了:浏览到第二页后。对数据进行查询时,后台返回的数据是空。原因是:当前页码为第二页。所以向后台发送请求的pageNumber=2,当pageNumber=1时。就可以查询到数据了。

    所以在请求数据时,判断搜索框是否有值,如果有值,把当前pageNumber=1,就可以正常查找到数据啦~
    在这里插入图片描述
    同样的问题还有就是当我删除第二页最后一项数据时,还是停留在第二页,没有数据。我们也可以这么解决。

    展开全文
  • vue+element ui 在无vue框架情况下实现可编辑(增删改)表格+表格分页+axios获取后台数据/传输数据上效果!!!直接放代码 ** 上效果!!! ** 表格初始样子 添加一条数据,点击操作栏的“编辑”按钮,对数据进行...
  • vue+element 分页bug

    2021-01-20 11:40:58
    vue+elementPagination 分页 第二页删除...2.删除最后一条数据之后(当前页数转为第一页,可是页面并没有跳转到第一页,而是显示暂无数据) 解决办法: <!--分页--> <div class="page"> <el-pagin...
  • 一丶项目分析 1.UI: 2.接口信息: 二丶项目环境 Mockjs:生成模拟数据(含中文名,以及地址) ...Vue起步(cli) 安装: npm install –save Mockjs 使用: 详细API:mockjs.com mock.js var Mock = require('m
  • 应用于PC端的网站项目使用Vue+axios+Element等组件进行开发,项目需求首页的提供需求展示列表页面需要下拉刷新加载页面。 页面数据初始化,Data数据中添加三个初始化的变量 // 设置一个开关来避免重复请求数据 ...
  • vuetable-数据表简化! 无需自己渲染表格 一个简单的vuetable标签 显示从服务器检索的带有排序选项的数据 通过@balping支持多列排序(v1.2.0) 包括分页组件,可互换和可扩展 定义字段以映射您的JSON数据结构 定义...
  • Vue整合Element-UI的分页组件实现分页

    千次阅读 2019-02-07 22:58:27
    VUE整合Element-UI的分页组件实现分页 前段时间在做一个系统后台,需要用表格加载显示后台数据项并分页显示。  分页可以通过不同的方式实现:  1、客户端分页  一次请求把数据全部从后端请求回来,在前端处理,...
  • 1、安装相关依赖 npm install --save xlsx file-saver 2、组件里头引入 import FileSaver from 'file-saver' import XLSX from 'xlsx' 3、组件methods里写一个方法 ... /* generate wo...
  • vue上拉加载分页

    千次阅读 2019-04-23 13:42:42
    <template> <div class="hello"> <div class="no-data" v-if="noData"> 暂无数据 </div> <div class="list" v-else> <div class="list-c...
  • vue-cli 项目添加分页模块----搜索列表分页模块 最近公司做了个态势感知系统(说白了就是数据可视化,做一些数据分类显示),由于搜索出来的数据特别多需要做个分页组件,废话不多说 直接上干货。 先看看效果 首先...
  • (3)查找第一页数据会正常返回值并且视图正常更新,查找第二页中数据时数据正常返回,但是视图不更新(表格中显示无数据)。 问题解决: (1)感觉是vue视图没有及时更新,用尽各种各样办法(强制更新, Vue....
  • var newToAddLeave = function(){ var goIndex = { template:` <i-table :columns="overTimeList.columns" :data="overTimeList.data" no-data-text="暂无数据">...
  • vue.js api请求成功,列表50条数据分页偶尔渲染不出来,有遇到的吗 偶尔会发生v-for下的内容空白,api 返回json 数据正确 报错信息 代码 (video, key) in videos"> ('video-...
  • 当搜索结果总页数小于当前所在页码,会显示“暂无数据”,实际上有数据 产生原因:我们搜索的时候向接口查询数据,传的currentpage是当前的,但是想搜索的数据并没有那么多页,所以会无法显示数据 解决思路 他搜索...
  • 前端模拟数据示例,无需后台接口,复制粘贴即可看到效果。 <template> <div> <div class="common-wrapper"> <!--列表--> <el-table :data="lists" ref="table" highlight-current-...
  • vue+element+el-table渲染数据闪烁

    千次阅读 2020-05-29 13:10:33
    点击不同页的过程中,el-table表格会闪烁暂无数据 然后才会加载数据。 没有使用假数据时那种流畅感,对于用户体验很差。 解决问题 遇到问题时,我想直接通过添加element的内置过度动画来解决问题,结果失败了,...
  • 在之前,当有很多列表需要展示时,会通过分页的方式来展现,通过分页能够保证高性能和适当的内存使用,但是不足之处在于,分页的切换会打断用户的浏览连贯性,同时也会增加用户的等待时间。现在流行的长列表加载方式...
  • 前端环境:vue2.5 element分页插件 bug描述: 查询条件为空时,总记录数100:totalPages =10 csurrentPage=10 如加上查询条件:name=“str”,总记录数变为20,totalPages=2 点击查询,虽然查到20条记录,但由于当前...
  • 列表分页切换刷新

    2017-02-15 17:14:12
    采用的是vue.js,当然了,angular也是可以的,只要支持数据绑定就可以 js java
  • loop:是否开启无缝循环轮播, autoplay:是否自动开启轮播 speed:轮播速度 spaceBetween:轮播图片的间距 slidesPerView:显示轮播图片数量 centeredSlides: active slide位置,默认居左 ...死数据一般是没毛病...
  • vue-manage包含了两个项目,一个为后台项目:vue-serevr-backend,提供基本的数据服务,另一个为前台项目:vue-backend-mange,提供可视化界面服务 后台项目: vue-server-backend 后台项目的启动流程为: 执行...
  • 监听滚动事件,滚动到底部100px的时候去请求接口获取分页数据2.将接口返回的数据和页面原有的数据相加3.如果当前页等于总页数,显示‘没有更多了’4.如果一开始就没有数据,显示‘暂记录’5.滚动的事件要考虑事件...
  • 分页封装:前端使用mixins封装分页分页方法调用mixins即可 用户管理:系统管理员分配用户角色和角色权限。 角色管理:创建权限控制的主要对象,可以给角色分配不同api权限和菜单权限。 菜单管理:实现用户动态菜单...
  • 没用ui框架写简单的实现了下功能 ...同时判断最后一页时不请求,展示无数据状态 主要代码: 1:监听滚动底部 <script> export default { name: "index_SearchPage", data() { return...
  • web打印自动分页

    2019-09-25 21:07:42
    支持移动端,PC端浏览器,angular,vue,react, 等 分页预览,打印,操作简单,运行快速。预览界面为css+html 。支持数据分组,批量预览。生产pdf,图片更方便 可以在window,ios,linux 系统浏览器...

空空如也

空空如也

1 2 3 4
收藏数 63
精华内容 25
关键字:

vue分页无数据

vue 订阅