indexPageSize.vue

<template>
  <div class="pageContain">
    <el-pagination
    style="padding:10px;float:right"
      :current-page="pageData.page"
      :page-sizes="pageSize"
      :page-size="pageData.size"
      :total="pageData.total"
      class="admin_pagination"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"/>
  </div>
</template>

<script>
export default {
  components: {

  },
  props: {
    pageData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    changePageData: {
      type: Function,
      required: true
    },
    pageSize: {
      type: Array,
      default: () => [5,10, 20, 30, 40]
    }
  },
  data() {
    return {
    }
  },
  computed: {

  },
  watch: {

  },
  created() {

  },
  mounted() {

  },
  methods: {
    handleSizeChange(val) {
      this.changePageData('size', val)
    },
    handleCurrentChange(val) {
      this.changePageData('page', val)
    }
  }
}
</script>

<style scoped lang="scss">
.pageContain{
  // background: red;
  display: flex;
  justify-content: flex-start;
}
</style>