web-test/src/components/pages.vue

<template>
  <div id="pagination">
    <el-row type="flex" align="middle" style="padding-top:1rem">
      <el-col :span="24" :style="`text-align:${position};`">
        <p>
          <span class="newpage">
            跟帖<span class="gentie">{{ total }}</span></span
          >
          <span
            ><el-pagination
              background
              layout="prev, pager, next"
              :total="total"
              :page-size="limit"
              :current-page.sync="currentPage"
              @current-change="changePage"
            >
            </el-pagination
          ></span>
        </p>
        <!-- 
          :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>
.newpage {
  width: 86%;
  float: left;
}
.gentie {
  color: red;
  font-size: 20px;
}
</style>