element ui Pagination 分页组件

目录

1.组件概述

1.background

2.@size-change

3.@current-change

4.:current-page

5.:page-sizes

6.:page-size

7.layout

8.:total

2.组件使用

---

1.组件概述

 分页组件不用说就是分页显示数据的，怎么使用它呢？先从渲染效果来看吧

 <div class="blocka">
            <el-pagination
            :background="true" 
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="formLibsearch.pageNum"
            :page-sizes="[2, 5, 10, 20]"
            :page-size="formLibsearch.pageSize"
            layout="total,prev, pager, next, sizes,jumper"
            :total="healthEdulist.length"
          >
          </el-pagination>
       </div>

1.background

 第一个background用于是否为分页按钮添加背景色，不是很清楚对吧，他默认是不开启的

效果是这样的，添加了之后我感觉就是可以改样式的，加上之后改了样式后

 

//分页样式

.blocka {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 25px;
  margin-bottom: 10px;
  padding: 32px 16px;
  background: #fff;
}
.blocka ::v-deep .el-pagination.is-background .btn-prev,
.blocka ::v-deep .el-pagination.is-background .btn-next,
.blocka ::v-deep .el-pagination.is-background .el-pager li {
  margin: 0 5px;
  background-color: #fff;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
  border: 1px solid lightgrey;
}
 
.blocka
  ::v-deep
  .el-pagination.is-background
  .el-pager
  li.active {
  background: #1890ff;
  color: #ffffff;
}

主要还是看需求吧 ，样式仅供参考

2.@size-change

@size-change="handleSizeChange"是改变每页显示数触发函数

3.@current-change

@current-change="handleCurrentChange"是改变当前页码数时触发函数

4.:current-page

:current-page="queryParams.pageNum"是当前要显示的页码，当然动态改变页码的话要动态绑定

5.:page-sizes

:page-sizes="[2, 5, 10, 20]"为可选每页显示的数据量

6.:page-size

:page-size="queryParams.pageSize"是当前每页显示的数据量

7.layout

 layout="total,prev, pager, next, sizes,jumper"这个就有点意思了，我写的里面的都是完整版的，每个参数对应一个模块

这里完全可以根据自己的需求增删参数，需要哪些就写哪些参数，当然参数的排序方式决定了你的页面内容显示顺序

8.:total

:total="totalLength"总的数据条数

2.组件使用

怎么使用这个组件呢，记住一定要动态绑定属性,total和page-sizes可以默认值，和后端配合

    handleSizeChange(val) {
      this.queryParams.pageSize = val
      this.getTotalList()
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val
      this.getTotalList()
    },

每次改变pageSize和pageNum都要更新data中相应的pageSize和pageNum

希望对你有用