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

代码实例讲解关于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]
            }
        },