middleground_code_v2/src/components/base/basePage/index.vue

<!--
* @name: 自定义分页组件
* @author: Zhangpengcheng
* @date: 2022-09-05
-->
<template>
  <div class="pageTion" flex="main:right">
    <el-pagination ref="pagination" :page-sizes="[10,20, 30, 40,100]" :total="pageModel.total"
                   :current-page="pageModel.pageIndex"
                   :page-size="pageModel.pageSize"
                   @current-change="currentChange" @size-change="sizeChange" background
                   layout="prev, pager, next,jumper,total,sizes"
    >
    </el-pagination>
  </div>
</template>
<script>
export default {
  props: {
    pageModel: {
      default: null
    }
  },
  data() {
    return {}
  },
  created() {
  },
  mounted() {
    this.$nextTick(() => {
    })
  },
  computed: {},
  methods: {
    sizeChange(val) {
      let pageModel = this.pageModel
      pageModel.pageSize = val
      pageModel.limit = val
      this.$emit('update:pageModel', pageModel)
      this.$emit('onPageChange')
    },
    currentChange(val) {
      let pageModel = this.pageModel
      pageModel.pageIndex = val
      pageModel.page = val
      this.$emit('update:pageModel', pageModel)
      this.$emit('onPageChange')
    }
  }
}
</script>
<style scoped lang="scss">
.pageTion {
  width: 100%;
  margin: 10px 0;
}

::v-deep .el-pager li {
  background-color: #f9f9f9 !important;
  width: 36px !important;
  height: 36px !important;
  line-height: 36px !important;
  border-radius: 50% !important;
}

::v-deep .el-pager .active {
  background-color: #409EFF !important;
}

::v-deep .el-pagination button {
  background-color: #f9f9f9 !important;
  color: #333333 !important;
  font-size: 14px !important;
  border-radius: 18px !important;
  width: 98px !important;
  height: 36px !important;
}

::v-deep .el-pagination__total {
  line-height: 36px !important;
}

::v-deep .el-pagination__jump {
  height: 36px !important;
  line-height: 36px !important;
}

::v-deep .el-input__inner {
  height: 36px !important;
  line-height: 36px !important;
}
</style>