分页Vue el-pagination 封装

el-pagination:放于底部

数据渲染时: :data="tableData1.slice((currentPage-1)*pagesize,currentPage*pagesize)"

tableData1  为发送请求得到的数据

//定义初始数据
 data() {
    return {
      currentPage: 1,
      pagesize: 10
    };
  },

<el-footer>
      <template>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"				//方法1
            @current-change="handleCurrentChange"		//方法2
            :current-page="currentPage"     //默认显示首页为 :1 
            :page-sizes="[5, 10, 20, 40]" 
            :page-size="pagesize"			//每页显示条目个数，支持 .sync 修饰符
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData1.length"    //数据 (tableData1.length)
          ></el-pagination>
        </div>
      </template>
    </el-footer>

methods:{
 // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange: function(size) {
      this.pagesize = size;
    },
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage;
    },
 }