common/src/components/frame/pagination.vue

<template>
  <div id="pagination">
    <el-row type="flex" align="middle" style="padding-top:1rem">
      <el-col :span="24" :style="`text-align:${position};`">
        <el-pagination
          background
          layout=" total, prev, pager, next"
          :total="total"
          :page-size="limit"
          :current-page.sync="currentPage"
          @current-change="changePage"
        >
        </el-pagination>
        <!-- 
          :page-sizes="[5, 10, 15, 20, 50, 100]"
          @size-change="sizeChange"
         -->
      </el-col>
    </el-row>
  </div>
</template>

<script>
import _ from 'lodash';
export default {
  name: 'pagination',
  props: {
    position: { type: String, default: 'right' },
    total: { type: Number, default: 0 },
    limit: { type: Number, default: 10 },
  },
  components: {},
  data: () => {
    return {
      currentPage: 1,
    };
  },
  created() {},
  methods: {
    changePage(page) {
      this.$emit('query', { skip: (page - 1) * this.limit, limit: this.limit });
    },
    sizeChange(limit) {
      this.limit = limit;
      this.$emit('query', { skip: 0, limit: this.limit });
    },
  },
};
</script>

<style lang="less" scoped></style>