From ba52c7ec65b8284a03c3a3ac54ba42b0dca65d26 Mon Sep 17 00:00:00 2001
From: java_nn <xiayonline@163.com>
Date: Fri, 6 May 2022 19:46:20 +0800
Subject: [PATCH] =?UTF-8?q?[Add]=20=E6=B7=BB=E5=8A=A0=E8=A1=A8=E6=A0=BC?=
 =?UTF-8?q?=E5=88=86=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/admin/table/Example.vue | 104 +++++++++++++++++++++---------------
 1 file changed, 61 insertions(+), 43 deletions(-)

diff --git a/src/admin/table/Example.vue b/src/admin/table/Example.vue
index 0ac2bcc..50b967d 100644
--- a/src/admin/table/Example.vue
+++ b/src/admin/table/Example.vue
@@ -1,52 +1,70 @@
 <template>
-    <b-row>
-        <b-col>
-            <div class="widget-box">
-                <div class="widget-title">
-                    <span class="icon"><i class="icon icon-tasks"></i></span>
-                    <h5>Table Example</h5>
-                    <span class="label">
+  <b-row>
+    <b-col>
+      <div class="widget-box">
+        <div class="widget-title">
+          <span class="icon"><i class="icon icon-tasks"></i></span>
+          <h5>Table Example</h5>
+          <span class="label">
                         <b-link href="#"><b-badge variant="primary">Link1</b-badge></b-link>
                     </span>
-                </div>
-                <div class="widget-content">
-                    <b-table
-                            responsive
-                            hover
-                            striped
-                            bordered
-                            foot-clone
-                            :fields="fields"
-                            :items="items">
-
-                    </b-table>
-                </div>
-            </div>
-        </b-col>
-    </b-row>
+        </div>
+        <div class="widget-content">
+          <b-table id="my-table"
+                   responsive
+                   hover
+                   striped
+                   bordered
+                   :per-page="perPage"
+                   :current-page="currentPage"
+                   :fields="fields"
+                   :items="items">
+          </b-table>
+          <b-pagination
+              v-model="currentPage"
+              :total-rows="rows"
+              :per-page="perPage"
+              aria-controls="my-table">
+          </b-pagination>
+        </div>
+      </div>
+    </b-col>
+  </b-row>
 </template>
 
 <script>
-    const fields = [
-        {key:"username", label:"用户名", sortable: true},
-        {key:"age", label:"年龄", sortable: true},
-        {key:"email", label:"电子邮箱", sortable: false},
-        {key:"register_date", label:"注册时间", sortable: true},
-    ];
-    const items = [
-        {username: "张三", age: 15, email: 'zhangsan@admin.com', register_date: "2019-01-01"},
-        {username: "李四", age: 25, email: 'lisi@admin.com', register_date: "2019-01-02"},
-        {username: "小明", age: 18, email: 'xiaoming@admin.com', register_date: "2019-01-03"},
-        {username: "小强", age: 28, email: 'xiaoqiang@admin.com', register_date: "2019-01-08"},
-        {username: "小梅", age: 20, email: 'xiaomei@admin.com', register_date: "2019-01-09"},
-    ];
+const fields = [
+  {key: "username", label: "用户名", sortable: true},
+  {key: "age", label: "年龄", sortable: true},
+  {key: "email", label: "电子邮箱", sortable: false},
+  {key: "register_date", label: "注册时间", sortable: true},
+];
+const items = [
+  {username: "张三", age: 15, email: 'zhangsan@admin.com', register_date: "2019-01-01"},
+  {username: "李四", age: 25, email: 'lisi@admin.com', register_date: "2019-01-02"},
+  {username: "小明", age: 18, email: 'xiaoming@admin.com', register_date: "2019-01-03"},
+  {username: "小强", age: 28, email: 'xiaoqiang@admin.com', register_date: "2019-01-08"},
+  {username: "小梅", age: 20, email: 'xiaomei@admin.com', register_date: "2019-01-09"},
+  {username: "张三", age: 15, email: 'zhangsan@admin.com', register_date: "2019-01-01"},
+  {username: "李四", age: 25, email: 'lisi@admin.com', register_date: "2019-01-02"},
+  {username: "小明", age: 18, email: 'xiaoming@admin.com', register_date: "2019-01-03"},
+  {username: "小强", age: 28, email: 'xiaoqiang@admin.com', register_date: "2019-01-08"},
+  {username: "小梅", age: 20, email: 'xiaomei@admin.com', register_date: "2019-01-09"},
+];
 
-    export default {
-        data() {
-            return {
-                fields: fields,
-                items: items,
-            }
-        }
+export default {
+  data() {
+    return {
+      fields: fields,
+      items: items,
+      perPage: 3,
+      currentPage: 1
+    }
+  },
+  computed: {
+    rows() {
+      return this.items.length
     }
+  }
+}
 </script>
-- 
Gitee