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;
      },

 

 

转载于:https://www.cnblogs.com/xinchenhui/p/9604364.html

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值