vue table列表分页_vue table 分页

以表格分页为例

1、页面表格部分

<el-table :data="testpage.slice((currentPage-1)*pagesize,currentPage*pagesize)" border style="width: 100%" >
    <!-- 要使当页显示分页后的对应数据，其下标应为(当前页-1)*每页数据数 到 当前页*每页数据数。使用slice方法进行取用  -->
    <el-table-column prop="id" :inputValue="msg" label="ID" width="180"></el-table-column>
    <el-table-column prop="title" label="标题"></el-table-column>			
    <el-table-column prop="peo" label="姓名" width="180"></el-table-column>
    <el-table-column prop="tel" label="手机"></el-table-column>
    <el-table-column prop="dataTimes" label="时间"></el-table-column>
    <el-table-column label="头像"  >
	<template scope="scope">
	    <p class="pic"><img :src="scope.row.pho" :alt="scope.row.peo" /></p >
	</template>
    </el-table-column>	
</el-table>

2、页面分页部分

<div class="yema">
    <el-pagination background
	@size-change="handleSizeChange" 
	@current-change="handleCurrentChange"  
	:current-page="currentPage"  
	:page-sizes="[5,10,15]"
	:page-size="pagesize"   
	layout="total,jumper,prev, pager, next,sizes"
	:total="testpage.length" >
    </el-pagination>
</div>
<!-- handleSizeChange为pagesize发生改变时的相应函数	-->
<!-- handleSizeChange为pagesize发生改变时的相应函数	-->
<!-- --> 
<!-- page-sizes为所有可选择的page-size。可以自己更改其中的数字 设置多少条一页 -->
<!-- layout为附带的功能，一般不用动它 --> 
<!--total为总数据数 --> 

3、页面js部分

export default {
    data() {
      return {
        testpage: [],  
        currentPage:1,
        pagesize:5,        
      }
    },	
   methods: {
        ///分页    初始页currentPage、初始每页数据数pagesize和数据testpage
	handleSizeChange:function(size){
	    this.pagesize=size;
	},
	handleCurrentChange:function(currentPage){
	    this.currentPage=currentPage;
	},		
   }
}

json格式

{
  "imgListData": [{
      "id": "1",
      "title": "标题",
      "content": "内容 ",
      "city": "城市",
      "adrs": "地址描述",
      "room": "文字描述",
      "imgUrl": "图片地址 ",
      "dataTimes": "日期",
      "peo": "姓名",
      "tel": "手机号",
      "pho": "img的src地址"
    }, {
      "id": "2",
      "title": "标题",
      "content": "内容",
      "city": "城市",
      "adrs": "地址描述",
      "room": "文字描述",
      "imgUrl": "图片地址 ",
      "dataTimes": "日期",
      "peo": "姓名",
      "tel": "手机号",
      "pho": "img的src地址"
    }
 
  ]
}