elmentui分页

vue项目使用elmentUI实现分页显示的效果（一个纯前端的实现）

效果图

1.html部分代码（css样式就不贴代码了）

<div class="newsBox">
     <el-breadcrumb separator-class="el-icon-arrow-right">
         <el-breadcrumb-item><span style="color:#2D66FF">新闻资讯</span></el-breadcrumb-item>
         <el-breadcrumb-item :to="{ path: '/news2' }">行业动态</el-breadcrumb-item>
     </el-breadcrumb>
     <h1>新闻中心</h1>
     //新闻以卡片的形式显示
     <div class="newscardBox">
          <el-card class="boxCard" v-for="url in newsList" > 
                 <div @click="goNewsPage">
                      <p>{{url.data}}</p>
                      <span>{{url.title}}</span>
                 </div>
          </el-card>
     </div>
     <div class="block">
     //分页
           <el-pagination
                 @size-change="handleSizeChange"
                 @current-change="handleCurrentChange"
                 :page-sizes="pageSizes" 
                 :page-size="PageSize"
                 :current-page="currentPage"
                 layout="total, sizes, prev, pager, next, jumper"
                 :total="item1.length">    
           </el-pagination>
      </div>           
</div>

2.return中的变量数据

 data(){
        return{
            // 所有新闻对象数组
            item1:[
                {id:1,data:"公司新闻1 | 2019年7月8日",title:"xxxxxxxxxxxxxxxx" },
                {id:2,data:"公司新闻2 | 2019年6月10日",title:"xxxxxxxxxxxxxxxx" },
                {id:3,data:"公司新闻3 | 2020年3月19日",title:"xxxxxxxxxxxxxxxx" },
                {id:4,data:"公司新闻4 | 2019年10月8日",title:"xxxxxxxxxxxxxxxx" },
                {id:5,data:"公司新闻5 | 2019年7月8日",title:"xxxxxxxxxxxxxxxx习。" },
                {id:6,data:"公司新闻6 | 2019年6月21日",title:"xxxxxxxxxxxxxxxx观学习。" },
                {id:7,data:"公司新闻7 | 2019年10月23日",title:"xxxxxxxxxxxxxxxx参观学习。" },
                {id:8,data:"公司新闻8 | 2019年11月25日",title:"xxxxxxxxxxxxxxxx参观学习。" },
                {id:5,data:"公司新闻9 | 2019年2月25日",title:"xxxxxxxxxxxxxxxx观学习。" },
                {id:6,data:"公司新闻10 | 2019年6月21日",title:"xxxxxxxxxxxxxxxx" },
                {id:7,data:"公司新闻11 | 2019年7月8日",title:"xxxxxxxxxxxxxxxx" },
                {id:8,data:"公司新闻12 | 2020年11月25日",title:"xxxxxxxxxxxxxxxx" }
            ],
            currentPage:1, //初始页
            // 当前需显示的新闻对象数组
            newsList: [],
             // 每页可展示的新闻条数（可修改）
           pageSizes:[4,8],
           // 默认每页显示的新闻条数（可修改）
           PageSize:8,
        }
    },

3.js代码实现部分

 created(){
        this.showNews();
    },
    methods: {
        showNews(){           
           //将显示新闻的对象置空
            this.newsList=[];                     
            //当前页需要显示的新闻条数
            let show_newsNum=0;
            //剩余新闻条数
            let surplus_news=this.item1.length-this.PageSize*(this.currentPage-1);
            if(surplus_news>=this.PageSize){
                show_newsNum=this.PageSize;
            }
            else{
                show_newsNum=surplus_news;
            } 
            //当前页从第几条开始显示
            let bginNum=this.PageSize*(this.currentPage-1)+1;
            for(var i=0;i<show_newsNum;i++){     
                this.newsList[i]=this.item1[bginNum-1+i]; 
                console.log(this.newsList[i])  
            }
            console.log(this.newsList);      
        },
        handleSizeChange(val){
            this.PageSize=val;
            // 每页显示的条数改变，调用显示新闻函数来重置展示新闻的对象数组
            this.showNews();
        },
        handleCurrentChange(val){
           this.currentPage=val;
           // 当前页改变，调用显示新闻函数来重置展示新闻的对象数组
           this.showNews();     
        },
    }

//一年后再次用到的整理代码
pagination(){
      //展示数据：this.TabOptions.tableData，原数据：this.originData
      this.TabOptions.tableData=[];
      //剩余数据条数
      let plusNum=this.originData.length - this.page.pageSize * (this.page.pageIndex - 1);
      //需展示的条数
      let showNum=plusNum > this.page.pageSize ? this.page.pageSize : plusNum;
      //需展示的数据开始下标
      let beginNum=this.page.pageSize * (this.page.pageIndex-1);
      for(var i=0;i<showNum;i++){
         this.TabOptions.tableData.push(this.originData[beginNum + i]);
      }
    }