ucard-back-front/src/components/pagePagination/index.vue

<template>
  <div v-if="pageInfo.rowTotal" class="crm_pagination">
    <div class="crm_page_total">
      <span>
        {{ $t('Page.total.item1') }}
      </span>
      <span>{{ pageInfo.rowTotal }}</span>
      <span>
        {{ $t('Page.total.item2') }}
      </span>
    </div>
    <el-pagination
      class="page"
      background
      layout="sizes, prev, pager, next"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageInfo.row"
      :total="pageInfo.rowTotal"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    />
  </div>
</template>

<script setup name="pagePagination">
  import { defineProps, defineEmits } from 'vue'

  const props = defineProps({
    // 数据信息
    pagerInfo: {
      type: Object,
      required: true,
    },
  })

  const emit = defineEmits(['current-change', 'size-change'])

  const pageInfo = props.pagerInfo

  const handleCurrentChange = (val) => {
    emit('current-change', val)
  }

  const handleSizeChange = (val) => {
    emit('size-change', val)
  }
</script>

<style scoped lang="scss">
  .crm_pagination {
    display: flex;
    align-items: center;
    //justify-content: space-between;
    margin-top: 16px;

    .crm_page_total {
      color: #606266;
      font-size: 14px;

      span {
        margin: 0 4px;
      }
    }

    .page {
      :deep(.el-pagination__total) {
        display: none;
      }
    }
  }
</style>