vue 快速自定义分页el-pagination

template

html 复制代码

<div style="text-align: center">
          <el-pagination
            background
            :current-page="pageObj.currentPage"
            :page-size="pageObj.page"
            :page-sizes="pageObj.pageSize"
            layout="total,prev, pager, next, sizes"
            :total="pageObj.total"
            prev-text="上一页"
            next-text="下一页"
            @current-change="currentChange"
            @size-change="sizeChange"
          >
          </el-pagination>
        </div>

data

js 复制代码

pageObj: {
        currentPage: 1,
        pageSizes: [10, 20, 30, 40],
        size: 10,
        total: 1000,
},

method

js 复制代码

handleSizeChange(val) {
    console.log(`每页 ${val} 条`);
  },
  handleCurrentChange(val) {
    console.log(`当前页: ${val}`);
  }

css 复制代码

::v-deep .el-pagination .btn-prev {
  background-color: #1f3c77;
  color: #fff;
  padding: 0 10px;
}
::v-deep .el-pagination .btn-next {
  background-color: #1f3c77;
  color: #fff;
  padding: 0 10px;
}
::v-deep .el-pagination .el-pager li:not(.disabled).active {
  background-color: #457ae6;
}
::v-deep .el-pagination .el-pagination__total {
  color: #fff;
}
::v-deep .el-pagination .el-select .el-input .el-input__inner {
  color: #fff;
}
::v-deep .el-pagination .el-pager li.number {
  background-color: #1f3c77;
  color: #fff;
}
::v-deep .el-pagination .el-pager .btn-quicknext {
  background-color: #1f3c77;
  color: #fff;
}
::v-deep .el-pagination .el-pager .btn-quickprev {
  background-color: #1f3c77;
  color: #fff;
}