vue前端分页

1.示例图 

2.主要代码 

用了element ui中的 pagination 组件

<template>
  <div class="table-container">
      <div :key="index" class="list"
         v-for="(item, index) in xList.slice((pageNum-1)*pagesize,pageNum*pagesize)" >
          <div>自定义内容</div>
      </div>
      <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="pageNum"
            :page-size="pagesize"
            layout="prev, pager, next"
            :total="total">
      </el-pagination>
  </div>
</template>
  
<script>
import {mesList} from '@/api/xxx'
export default {
    name: 'notice',
    data() {
        return {
            xList: [], 
            total:0,
            pageNum: 1,
            pagesize: 7,
        }
    },
    created() {
        this.getList();
    },
    methods: {
        // 获取列表数据
        getList() {
            mesList().then(response => {
                this.xList= response.data.rows;
                this.total = response.data.total; 
            })
        },
        handleSizeChange(val){
            this.pageSize=val
            // console.log(this.pageSize)
        },
        handleCurrentChange(val){
            this.pageNum=val
            // console.log(this.pageNum)
        },
    }
}
</script>