用vue element-ui分页组件构建一个简单的分页 ( 超详细 )

element-ui分页组件:

以下代码都是干货，欢迎大家互相评论学习

方法一 数据绑在div上:

<template>
<div>
   <div v-for="(value,index) in info.slice((currentPage-1)*pagesize,currentPage*pagesize)">
	<!-- slice((currentPage-1)*pagesize,currentPage*pagesize 是写分页的最重要的一句话-->
	<!--此处写需要循环的内容-->
   </div>
   <el-pagination
  		 @size-change="handleSizeChange"
		 @current-change="handleCurrentChange" //currentPage改变时会触发
		 :current-page="currentPage"
		 :page-size="pagesize"     //每页多少条数据        
		 layout="total,prev, pager, next, jumper"
		 :total="info.length">     //total总共多少条数据 
   </el-pagination>
</div>
</template>
 
 
 
<script>
export default {
     data(){
         return{
             currentPage:1, //初始页
             info:[],//数据
             pagesize:5,//每页多少数据
             currentPage:1  //默认当前页为第一页
         }
     },
     methods:{
         // 初始页currentPage、初始每页数据数pagesize和数据data
		 handleSizeChange: function (size) {
			 this.pagesize = size;
			 console.log(this.pagesize)  //每页下拉显示数据
		 },
		 handleCurrentChange: function(currentPage){
			 this.currentPage = currentPage;
			 console.log(this.currentPage)  //点击第几页
		 },
     },
     mounted(){  //如果使用数据接口的话，用这段代码
      <!-- axios.get('/api',{
             params:{
                  //请求参数
             }
         }).then(res => {
             this.info = res.data //赋值
         }) --!>
     }
}
</script>

方法二 数据绑在el-table上: ( 小demo，可以直接运行)

<!--分页功能-->
    <div class="deit">
    <div class="crumbs">
      <el-breadcrumb separator="/">
            <el-breadcrumb-item><i class="el-icon-date"></i> 数据管理</el-breadcrumb-item>
            <el-breadcrumb-item>用户列表</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="cantainer">
            <el-table style="width: 100%;" :data="userList.slice((currentPage-1)*pagesize,currentPage*pagesize)">
               <el-table-column type="index" width="50">    
               </el-table-column>
               <el-table-column label="日期" prop="date" width="180">    
               </el-table-column>
               <el-table-column label="用户姓名" prop="name" width="180">    
               </el-table-column>
               <el-table-column label="邮箱" prop="email" width="180">    
               </el-table-column>
               <el-table-column label="地址" prop="address" width="200">    
               </el-table-column>    
           </el-table>
           <el-pagination
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="currentPage"
                   :page-sizes="[5, 10, 20, 40]" 
                   :page-size="pagesize"         
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="userList.length">    <!--//这是显示总共有多少数据，-->
           </el-pagination>
        </div>
    </div>
  </div>
  <script>
	   export default {
	        data () {
	          return {
	            currentPage:1, //初始页
	            pagesize:10,    //每页的数据
	            userList: []
	          }
			},
			mounted() {
				console.log("页面加载",)
			},
	   created() {
	           this.handleUserList()
	         },
	   methods: {
	             // 初始页currentPage、初始每页数据数pagesize和数据data
	             handleSizeChange: function (size) {
	                     this.pagesize = size;
	                     console.log(this.pagesize)  //每页下拉显示数据
	             },
	             handleCurrentChange: function(currentPage){
	                     this.currentPage = currentPage;
	                     console.log(this.currentPage)  //点击第几页
	             },
	             handleUserList() {
	                 // this.$http.get('http://localhost:3000/userList').then(res => {  //这是从本地请求的数据接口，
	                 //     this.userList = res.body
	                 // })
	                 this.userList = [{
	                   date: '2016-05-03',
	                   name: '王小虎',
	                   email:'adda',
	                   address: '上海市普陀区金沙江路 1518 弄'
	                 }, {
	                   date: '2016-05-02',
	                   name: '王小虎',
	                   email:'adda',
	                   address: '上海市普陀区金沙江路 1518 弄'
	                 }, {
	                   date: '2016-05-04',
	                   name: '王小虎',
	                   email:'adda',
	                   address: '上海市普陀区金沙江路 1518 弄'
	                 }, {
	                   date: '2016-05-01',
	                   name: '王小虎',
	                   email:'adda',
	                   address: '上海市普陀区金沙江路 1518 弄'
	                 }, {
	                   date: '2016-05-08',
	                   name: '王小虎',
	                   email:'adda',
	                   address: '上海市普陀区金沙江路 1518 弄'
	                 }, {
	                   date: '2016-05-06',
	                   name: '王小虎',
	                   email:'adda',
	                   address: '上海市普陀区金沙江路 1518 弄'
	                 }, {
	                   date: '2016-05-07',
	                   name: '王小虎',
	                   email:'adda',
	                   address: '上海市普陀区金沙江路 1518 弄'
	                 }, {
	                   date: '2016-05-08',
	                   name: '王小虎',
	                   email:'adda',
	                   address: '上海市普陀区金沙江路 1518 弄'
	                 }, {
	                   date: '2016-05-06',
	                   name: '王小虎',
	                   email:'adda',
	                   address: '上海市普陀区金沙江路 1518 弄'
	                 }, {
	                   date: '2016-05-08',
	                   name: '王小虎',
	                   email:'adda',
	                   address: '上海市普陀区金沙江路 1518 弄'
	                 }, {
	                   date: '2016-05-06',
	                   name: '王小虎',
	                   email:'adda',
	                   address: '上海市普陀区金沙江路 1518 弄'
	                 }]
	             },
	   },
	   }
  </script>