iview table+page组件筛选数据渲染

iview官网中page换页配合table组件有示例,切换请求展示数据。
需求:请求返回的数据需要进行赛选后再进行展示,不能直接将数据与table :data进行关联。


3.gif
<template>
 // changeTableCheckbox 勾选事件
  <table :clumens="cloumns" :data="data" @on-selection-change="changeTableCheckbox"></table>

  <page 
    :total="total" 
    :page-size="pageSize" 
    :current="pageIndex" 
    @on-change="changePage"  
    @on-page-size-change="changePageSize" 
    show-total 
    show-sizer></page>
</template>

data(){
  return {
    oldData: [] // 用来存储筛选后得到的数据
    data: [] // table 对应的数组
    total: 0, // 数据的总条数
    pageIndex: 1, // 当前页数
    pageSize: 10, // 每页条数
    total: 0 // 总条数
  }
},
mounted(){
  this.data = this.oldData.slice(0, this.pageSize)
  this.total = this.oldData.length
},
methods: {
  // 换页
  changePage(index) {
    this.pageIndex = index
    var start = (index  - 1) * this.pageSize
    var end = index * this.pageSize
  },
  // 每页展示多少条
  changePageSize(value) {
     this.pageSize = value
     if(this.pageIndex == 1) {
      this.init()
    }
  }
}

日常记录,有错误or优化请指出,不胜感激!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容