vue element ui分页演示demo 对接上后台数据就能用

最新推荐文章于 2022-07-07 15:08:25 发布

vue学习

最新推荐文章于 2022-07-07 15:08:25 发布

阅读量611

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_44180173/article/details/104546590

版权

vue 专栏收录该内容

48 篇文章 2 订阅

订阅专栏

自己写的分页demo 加上后台数据就可用

页面展示

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
	<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
</head>
<style>
#app {width:800px; margin:0 auto ;  }
</style>
<body>
  <div id="app"> 
   <template>
	<el-table  :data="arrData"  style="width: 100%">		
    <el-table-column  type="index" label="序号" :index="indexMethod" width="50"> </el-table-column>
    <el-table-column	prop="name"	label="姓名" width="180">  </el-table-column>
	</el-table>
	</template>   
	  <div class="block">
	   <el-pagination layout="prev, pager, next ,sizes, jumper" 			
			:page-count="pageCount" //总页数
            :page-size="pageSize" 
			:total="total" 		
			@current-change="currentChange" //点击第几页
			@prev-click="prevClick"         //上一页 点击上一页也调用 上面的currentChange事件 
			@next-click="nextClick"			//下一页 点击下一页也调用 上面的currentChange事件
			:page-sizes="[2, 5, 10, 20]" 	
			@size-change='sizeChange' //每页条数改变
			>
			</el-pagination>
    </div> 
	<el-button  @click="getData" >getData</el-button>
  </div>
</body>
  <!-- import Vue before Element -->
 
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
 new Vue({
     el: '#app',
    data: function() {
    return { 		     
	  total: 0, // 总条数
	  pageCount:4,//总页数
	  pageNum: 1, // 第几页
	  pageSize: 10, // 每页显示的数量		 
	  url:'post.php',
	  arrData: [
        {"name": "编号0","age": 10},
        {"name": "编号1","age": 10},
        {"name": "编号2","age": 10},
        {"name": "编号3","age": 10},
        {"name": "编号4","age": 10},
        {"name": "编号5","age": 10},
        ]  //后台数据格式自己模拟就可以了
		}
      },	   
    methods: { 
    indexMethod(index) { //添加序号
        return (this.pageNum-1)*(this.pageSize)+index+1;
    },	  
    sizeChange:function(n){//每页条数改变
        this.pageSize=n								
        this.getData(this.pageNum,this.pageSize); 
        },
    getData: function (pageNum,pageSize) {	     
        this.pageNum=pageNum || this.pageNum;//如果没传值使用默认
        this.pageSize=pageSize || this.pageSize;
        this.$http.get(this.url,{params :{pageNum:pageNum,pageSize:pageSize}}).then(resp=>{  
            console.log(resp);	 
            this.arrData=resp.body.lists
            this.total = resp.body.total; // 总页数
        }).catch(resp =>{
            console.log('failure');
        })
    },
    currentChange:function(val){ //页码变更 点击第几页  包括了上一页下一页					 
        this.pageNum = val;
        this.pageSize = this.pageSize;
        this.getData(this.pageNum,this.pageSize);
        },	
    prevClick:function(val){ //上一页			
        console.log('上一页');
        },	
    nextClick:function(val){//下一页
        console.log('下一页');
        },	
    },
    mounted:function(){
    let pageNum=1;
        this.getData(pageNum,this.pageSize); 
    }		
		  
 })
  </script>
</html>

vue学习

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue element ui分页演示demo 对接上后台数据就能用

自己写的分页demo 加上后台数据就可用页面展示<!DOCTYPE html><html><head> <meta charset="UTF-8">  <link rel="stylesheet" href="https://unpkg.com/eleme...
复制链接

扫一扫