Explorar el Código

增加分页控件的测试。

yangzhijie hace 4 años
padre
commit
b7362b2542

+ 3 - 0
examples/App.vue

@@ -49,6 +49,9 @@
                     <li>
                         <router-link :to="{ path: '/desktop/update-widget-example'}">上传控件</router-link>
                     </li>
+                    <li>
+                        <router-link :to="{ path: '/desktop/pagination-example'}">分页控件</router-link>
+                    </li>
 
 
                     <li>

+ 11 - 0
examples/route/index.js

@@ -13,6 +13,7 @@ const SwitchesExample = () => import(/* webpackChunkName: "switches-example" */
 const TimeExample = () => import(/* webpackChunkName: "time-example" */ '../time/src/TimeExample.vue')
 const TreeExample = () => import(/* webpackChunkName: "tree-example" */ '../tree/src/TreeExample.vue')
 const UploadWidgetExample = () => import(/* webpackChunkName: "tree-example" */ '../upload-widget/src/UploadWidgetExample.vue')
+const VueBootstrapPaginationExample = () => import(/* webpackChunkName: "tree-example" */ '../vue-bootstrap-pagination/src/VueBootstrapPaginationExample.vue')
 
 
 
@@ -76,6 +77,16 @@ export default {
 				/** 上传控件 */
 				{ path: 'update-widget-example', component: UploadWidgetExample },
 
+				/** 分页控件 */
+				{ path: 'pagination-example', component: VueBootstrapPaginationExample },
+
+
+
+
+				
+
+
+
 				/** 流程报表 */
 				{ path: 'process-report/:no', component: ProcessReport },
 

+ 46 - 0
examples/vue-bootstrap-pagination/src/VueBootstrapPaginationExample.vue

@@ -0,0 +1,46 @@
+<template>
+    <div>
+        <h1>分页控件</h1>
+        <VueBootstrapPagination :pagination="pagination"
+                    :callback="query"></VueBootstrapPagination>
+    </div>
+
+    <div>开始:{{ start }} 长度: {{ length }}</div>
+</template>
+
+<script>
+
+
+import VueBootstrapPagination from "@/vue-bootstrap-pagination/index.js";
+
+export default {
+
+    data: function () {
+        return {
+            pagination: {
+                total: 100,
+                per_page: 10, // required
+                current_page: 1, // required
+                last_page: 10, // required
+            },
+
+            start: '',
+            length: '',
+        }
+    },
+
+    components: {
+        VueBootstrapPagination,
+    },
+
+    methods: {
+        query: function () {
+            this.start = (this.pagination.current_page - 1) * this.pagination.per_page;
+            this.length = this.pagination.per_page;
+        }
+    }
+}
+</script>
+
+<style>
+</style>

+ 1 - 1
packages/vue-bootstrap-pagination/src/vue-bootstrap-pagination.vue

@@ -105,7 +105,7 @@ export default {
       if (this.pagination.current_page === page) {
         return;
       }
-      this.$set(this.pagination, 'current_page', page);
+      this.pagination.current_page = page;
       this.callback();
     },
   },