频道栏目
首页 > 程序开发 > web前端 > HTML/CSS > 正文
代码实例讲解关于element-ui分页在vue中的使用
2018-07-11 15:52:27      个评论    来源:qq_41078029的博客  
收藏   我要投稿

代码实例讲解关于element-ui分页在vue中的使用

<li v-for="(num,value) in pageTableData"></li>


     <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page.sync="currentPage4"
                                        :page-size="8"
                                        layout="prev, pager, next"
                     :total="listNum">
                    </el-pagination>

        <!-- 8为每页数量 -->



        data() {
            return {
                tabdata:[],//分页的数据
                currentPage4: 1,//分页
                listNum:1,//分页总条数
            }
        },


mounted() {
            this.listNum=this.tabdata.length;
        },

   methods: {
            handleSizeChange(val) {
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
},
   }
computed:{
            pageTableData(){
                let pages=Math.ceil(this.tabdata.length/8);//8为每页设置数量
                let newList=[];
                for(let i=0;i<pages;i++){
                let sonList=[];
                sonList=this.tabdata.slice(i*8,i*8+8);//8为每页设置数量
                newList.push(sonList)
                }
                return newList[this.currentPage4-1]
            }
        },
点击复制链接 与好友分享!回本站首页
上一篇:Kotlin学习之Val、Var和fun函数
下一篇:CSS自定义属性学习讲解
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站