Learn about pagination using Pagination in the element component

Realize the effect:

:total="this.memberAdvice.length * 1" 

 The above code means: total in the component means that the total number of pieces is equal to the current array length * 1 because the current array length is obtained by multiplying the string type by 1 and converting it to a numeric type

    <el-row>
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        layout="total, prev, pager, next"
        :total="this.memberAdvice.length * 1"  
        :page-size="pageSize"
        align="center"
        class="fenye"
      ></el-pagination>
    </el-row>

Return in return:

      currentPage: 1, //初始页
      pageNum: 1, //页码
      pageSize: 10, //每页显示的条数
      total: 0, //数据的总数,

Define property methods in methods 

    /*初始页currentPage、初始每页数据数pagesize和数据data*/
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      //改变每页显示的条数
      this.PageSize = val;
      this.queryList(); //刷新列表的数据
    },
     /*  当前页变化 */
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNum = val;
      this.queryList(); //刷新列表的数据
    },

Guess you like

Origin blog.csdn.net/weixin_57607714/article/details/123091604