PageSizeSelect.vue 814 B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546
  1. <template>
  2. <select id="gridSizeSelect" v-model="pageSize" class="pagesize-select form-control">
  3. <option value="10">10</option>
  4. <option value="20">20</option>
  5. <option value="50">50</option>
  6. <option value="100">100</option>
  7. <option value="200">200</option>
  8. <option value="500">500</option>
  9. </select>
  10. </template>
  11. <script>
  12. // 外部可以注册事件pageSizeChanged
  13. export default {
  14. name: 'PageSizeSelect',
  15. components : {
  16. },
  17. emits: ['pageSizeChanged'],
  18. data: function(){
  19. return {
  20. pageSize : 20,
  21. };
  22. },
  23. watch:{
  24. pageSize: function(newValue, oldValue){
  25. this.$emit('pageSizeChanged', newValue);
  26. },
  27. },
  28. };
  29. </script>
  30. <style scoped>
  31. .pagesize-select{
  32. display: inline !important;
  33. width: 70px !important;
  34. float: none !important;
  35. }
  36. </style>