pc-component-v5/packages/page-size-select/src/PageSizeSelect.vue

<template>
  <select
    id="gridSizeSelect"
    :value="pageSize"
    class="pagesize-select form-control"
    @change="pageSizeChange"
  >
    <option value="10">10</option>
    <option value="20">20</option>
    <option value="50">50</option>
    <option value="100">100</option>
    <option value="200">200</option>
    <option value="500">500</option>
  </select>
</template>

<script>
// 外部可以注册事件pageSizeChanged

export default {
  name: 'PageSizeSelect',

  components: {},
  props: {
    size: {
      type: Number,
      default: 20,
    },
  },

  emits: ['pageSizeChanged'],
  data: function () {
    return {
      pageSize: 20,
    };
  },
  watch: {
    size: function (newValue, oldValue) {
      this.pageSize = newValue;
    },
  },
  created: function () {
    this.pageSize = this.size;
  },

  methods:{
    pageSizeChange: function (event) {
      this.$emit('pageSizeChanged', event.target.value);
    },
  },
};
</script>

<style scoped>
.pagesize-select {
  display: inline !important;
  width: 70px !important;
  float: none !important;
}
</style>