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]

            }

        },