使用element-ui表格实现分页功能

实现效果:

一、将获取到的数据进行计算

<!-- 表格区域 -->
// uaerlist是获取数据的数组后面写入 
// .slice((currentPage-1)*pagesize,currentPage*pagesize)

    <el-table
      :data="uaerlist.slice((currentPage-1)*pagesize,currentPage*pagesize)"
      stripe
      style="width: 100%"
    >
      <el-table-column prop="username" label="姓名"></el-table-column>
      <el-table-column prop="create_time" label="注册时间":formatter="dateFormat"></el-table-column>
      </el-table-column>
      <el-table-column prop="del" label="操作">
        <el-button type="primary" size="mini" icon="el-icon-edit" circle @click="xiugai"></el-button>
        <el-button type="warning" size="mini" icon="el-icon-star-off" circle ></el-button>
        <el-button type="danger" size="mini" icon="el-icon-delete" circle @click="deleteProject"></el-button>
      </el-table-column>
    </el-table>

二、在表格下实现分页

<!-- 表格下面分页区域 -->
    <el-pagination
      small
      layout="total,prev,pager,next,jumper"
      :total="uaerlist.length"
      :page-size="pagesize"
      pager-count="3"
      :current-page="currentPage"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    ></el-pagination>

data () {
	return {
		pagesize: 3, // 一页有多少条数据
      	currentPage: 1, //当前的页数
	}
}

 methods:{
    // 每页显示的条数
       handleSizeChange(val) {
           // 改变每页显示的条数 
           this.pagesize=val
           // 注意：在改变每页显示的条数时，要将页码显示到第一页
           this.currentPage=1
       },
         // 显示第几页
       handleCurrentChange(val) {
           // 改变默认的页数
           this.currentPage=val
       },
  }