elementui分页组件的使用

       <!--分页 start-->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageInfo.currentPage"
      :page-sizes="[5, 10, 50, 100]"
      :page-size="pageInfo.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.pageTotal"
    ></el-pagination>
 <el-table
      :data="tableData.slice((pageInfo.currentPage-1)*pageInfo.pageSize,pageInfo.currentPage*pageInfo.pageSize)"
</el-table>
 data(){
    return{
        //分页
        pageInfo: {
          currentPage: 1,
          pageSize: 5,
          pageTotal: 20
        },
        tableData:[]
    }   
 },
methods:{
     handleSizeChange(val) {
       this.pageInfo.pageSize=val
        console.log("每页"+val+"条");
      },
      handleCurrentChange(val) {
        this.pageInfo.currentPage=val
        console.log("当前页:"+val);
      }
}

发布了319 篇原创文章 · 获赞 124 · 访问量 12万+

猜你喜欢

转载自blog.csdn.net/qq_40323256/article/details/103134567
今日推荐