vue 快速自定义分页el-pagination-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue 快速自定义分页el-pagination。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

vue 快速自定义分页el-pagination

vue 快速自定义分页el-pagination,vue.js,前端,javascript 文章来源地址https://www.toymoban.com/news/detail-603442.html

template

<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

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

method

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

::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;
}