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

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


3.gif


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优化请指出,不胜感激!

你可能感兴趣的:(iview table+page组件筛选数据渲染)