zoukankan      html  css  js  c++  java
  • iView 的分页结合表格用法

    HTML:

    <Table border stripe ref="selection" :columns="columns" :data="nowData"></Table>
    <Page :total="dataCount" :page-size="pageSize" @on-change="changepage" @on-page-size-change="_nowPageSize"
          show-total show-sizer show-elevator/>
    表格:
    columns:表头数据
    data:数据
    分页:
    total:分页显示多少条数据
    page-size:每页显示多少条数据
    on-change:改变页码回调,返回值:当前页码
    on-page-size-change:切换每页条数时回调,返回值:每页的数据条数
    JS:
      data(){
            return{
                columns:['表头'],
                data:['数据'],
                //分页
                pageSize: 10,//每页显示多少条
                dataCount: 0,//总条数
                pageCurrent: 1,//当前页
            }
        }
    methods:
    //所有数据 
       _getData() {
    //所有数据 this.data = []; for (let i = 0; i < 100; i++) { let a = { id: i, idName: 'Mr.Li' + i, name: '小李', organization: '国务院', people: '老李', state: '活跃', }; this.data.push(a); } //分页显示所有数据总数 this.dataCount = this.data.length; //循环展示页面刚加载时需要的数据条数 this.nowData = []; for (let i = 0; i < this.pageSize; i++) { this.nowData.push(this.data[i]); } },
    
    
    //点击,切换页面
          changepage(index) {
            //需要显示开始数据的index,(因为数据是从0开始的,页码是从1开始的,需要-1)
            let _start = (index - 1) * this.pageSize;
            //需要显示结束数据的index
            let _end = index * this.pageSize;
            //截取需要显示的数据
            this.nowData = this.data.slice(_start, _end);
            //储存当前页
            this.pageCurrent = index;
          },
    //每页显示的数据条数
          _nowPageSize(index) {
            //实时获取当前需要显示的条数
            this.pageSize = index;
          },
     
  • 相关阅读:
    Fragment中获取Activity的Context (转)
    raw cannot be resolved or is not a field解决办法
    商业分析07_06分布情况分析
    商业分析07_04漏斗分析
    商业分析07_03数据涨跌异动如何处理
    商业分析07_02多维度拆解
    商业分析07_01对比分析
    商业分析07_00概述 数据分析
    商业分析06选择数据工具
    商业分析05如何选取数据指标
  • 原文地址:https://www.cnblogs.com/xinchenhui/p/9604364.html
Copyright © 2011-2022 走看看