欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

elementui分页组件的使用

程序员文章站 2022-05-10 19:58:20
...
       <!--分页 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);
      }
}

elementui分页组件的使用

相关标签: elementui