首页 IT程序员内容详情

vue配合element组件实现分页的功能

2021-04-07 12382 编程艺术家
vue配合element组件实现分页的功能

站点名称:vue配合element组件实现分页的功能

所属分类:IT程序员

相关标签: # vue

官方网址:

SEO查询: 爱站网 站长工具

进入网站

站点介绍

我是写的小项目 不没有用vue的脚手架 组件也是用cdn方法引入的


<!-- 引入样式 -->

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

<!-- 引入组件库 -->

<script src="https://unpkg.com/element-ui/lib/index.js"></script>

 然后就是放入vue.js 但是这里注意  好像是你得先有vue.js才可以使用element.js才行 所以vue.js其实应该放在elemnt.js前面


<el-pagination


             @size-change="handleSizeChange"   


            @current-change="handleCurrentChange"


           :current-page="currentPage" //当前页面


            :page-sizes="[10,20]"  //用户可以切换一个页面显示多少个


           :page-size="pageSize"   //一个页面的显示格式 这个是和后台接口数据配合


            layout="total, sizes, prev, pager, next, jumper"  //  布局 有 总共条数  一个页面显示多少 上一页 当前 下一页 跳转到那一页


              :total="total">  //显示总共几条数据


       </el-pagination


然后是在vue的data中


var app=new Vue({

        el:"#app”,

        data:{                       


          total:500,    //这个是随便写的死数据 真实从后台回来数据之后会把这个给替换掉


           currentPage:1,  //默认是当前页


           pageSize:15,   //默认一个页面显示多少


        },


   created(){

                       //这里模拟后台回来的数据


                       axios.get().then(res=>{

                                      this.pageSize=res.page.pageSize;//一页几条数据


                                      this.currentPage=res.page.currPage;//当前第几页


                                      this.total=res.page.totalCount;//总数据


                         })


        },


methods:{

handleSizeChange(val) {

      this.pageSize = val;


    },


    handleCurrentChange(val) {

      this.currentPage= val;


    }


}


})


最后显示页面上的效果就是



————————————————

版权声明:本文为CSDN博主「yunchong_zhao」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。

原文链接:https://blog.csdn.net/yunchong_zhao/article/details/103496969


浏览统计(最近30天)

 暂无评论,快来抢沙发吧~

发布评论