1.0.69 修复分页器问题

examples/page-size-select/src/PageSizeSelectExample.vue

@@ -1,9 +1,11 @@
 <template>
   <h1>页面大小控件</h1>
 
-  <PageSizeSelect @page-size-changed="pageSize = $event" />
+  <PageSizeSelect :size="pageSize" @page-size-changed="pageSize = $event" />
 
   {{ pageSize }}
+
+  <button @click="changePageSize">修改页面大小</button>
 </template>
 
 <script>
@@ -25,7 +27,9 @@ export default {
   },
 
   methods: {
-   
+    changePageSize: function(){
+      this.pageSize += 10;
+    },
   },
 };
 </script>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pc-component-v3",
-  "version": "1.0.67",
+  "version": "1.0.69",
   "description": "",
   "main": "dist/pc-component-v3.js",
   "scripts": {

packages/page-size-select/src/PageSizeSelect.vue

@@ -1,7 +1,12 @@
 
 
 <template>
-  <select id="gridSizeSelect" v-model="pageSize" class="pagesize-select form-control">
+  <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>
@@ -17,40 +22,41 @@
 export default {
   name: 'PageSizeSelect',
 
-  components : {
-
-  },
-  props:{
-    size:{
-      type:String,
-      default:'20',
+  components: {},
+  props: {
+    size: {
+      type: Number,
+      default: 20,
     },
   },
 
   emits: ['pageSizeChanged'],
-  data: function(){
+  data: function () {
     return {
-      pageSize : 20,
+      pageSize: 20,
     };
   },
-  watch:{
-    pageSize: function(newValue, oldValue){
-      this.$emit('pageSizeChanged', newValue);
-    },
-    size: function(newValue,oldValue){
+  watch: {
+    size: function (newValue, oldValue) {
       this.pageSize = newValue;
     },
   },
-  created:function(){
+  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;
-	}
+.pagesize-select {
+  display: inline !important;
+  width: 70px !important;
+  float: none !important;
+}
 </style>