element组件中了解使用Pagination 分页

实现效果:

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

 上述代码意为:total 在组件里意为总条数 总条数等于当前的数组长度*1  因为当前数组长度获取的是字符串类型 乘以1 便转换成数值型

    <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里返回:

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

在methods里定义属性方法 

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

猜你喜欢

转载自blog.csdn.net/weixin_57607714/article/details/123091604
今日推荐