iview (view ui) 分页

知识点： slice用法

// template

//数据表格
<Table :colunms="testTitle" :data="page.showList"></Table>

// 分页
<Page 
  @on-change="currentPage"
  :total="page.allPieces" 
  :page-size="page.pagePieces"
   />

// js data

data () {
  return {
    page: {
      pagePieces: 10,
      allPieces: '',
      showList: []
    },
    testTitle: {
      title: '序号',
      key: 'id'
    },
    list: [1,2,3,4]
  }
}

// 1，初次加载分页展示  2，切换页面分页展示
methods: {
  toPage () {
    //获取数据总条数
    this.page.allPieces = this.list.length
  
    //首页内容展示
    this.page.showList = this.list.slice(0, this.page.pagePieces)
  },
  currentPage (page) {
    // 开始节点
    let startPage = (page * this.page.pagePieces) - this.page.pagePieces
    // 结束节点
    let endPage = page * this.page.pagePieces
    // 获取n页的数据
    this.page.showList = this.list.slice(startPage, endPage)
  }
}


// 首次加载
mounted () {
  // 初始化分页
  tihs.toPage()
}