

<template>
  <select id="gridSizeSelect" v-model="pageSize" class="pagesize-select form-control">
    <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 : {

  },

  emits: ['pageSizeChanged'],

  data: function(){
    return {
      pageSize : 20,
    };
  },

  watch:{
    pageSize: function(newValue, oldValue){
      this.$emit('pageSizeChanged', newValue);
    },
  },
};
</script>

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