From 0e01e1bfd347ca8ca617b7d876f4881a7041e3c9 Mon Sep 17 00:00:00 2001
From: RogerWork <roger.x.sun@qq.com>
Date: Tue, 10 Oct 2023 18:16:40 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E5=88=86=E9=A1=B5=E7=9A=84?=
 =?UTF-8?q?=E7=BB=83=E4=B9=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                |  1 +
 src/router/index.js        |  8 ++++-
 src/views/Table_Demo16.vue | 64 ++++++++++++++++++++++++++++++++++++++
 3 files changed, 72 insertions(+), 1 deletion(-)
 create mode 100644 src/views/Table_Demo16.vue

diff --git a/src/App.vue b/src/App.vue
index 165d44e..9c3d663 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -15,6 +15,7 @@
     <router-link :to="{name:'table13'}">Table Demo 13: 筛选</router-link><br>
     <router-link :to="{name:'table14'}">Table Demo 14: 展开行</router-link><br>
     <router-link :to="{name:'table15'}">Table Demo 15: 树形数据</router-link><br>
+    <router-link :to="{name:'table16'}">Table Demo 16: 分页</router-link><br>
   </div>
   <div>
     <router-view></router-view>
diff --git a/src/router/index.js b/src/router/index.js
index f111bf1..2435aa9 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -17,6 +17,7 @@ const tableDemo12 = () => import('../views/Table_Demo12.vue')
 const tableDemo13 = () => import('../views/Table_Demo13.vue')
 const tableDemo14 = () => import('../views/Table_Demo14.vue')
 const tableDemo15 = () => import('../views/Table_Demo15.vue')
+const tableDemo16 = () => import('../views/Table_Demo16.vue')
 
 // 引入组件
 
@@ -99,10 +100,15 @@ const routes = [
         component: tableDemo14
     },
     {
-        path: '/table25',
+        path: '/table15',
         name: 'table15',
         component: tableDemo15
     },
+    {
+        path: '/table16',
+        name: 'table16',
+        component: tableDemo16
+    },
 ]
 
 // 创建路由器，使用createRouter方法，传入history（路由类型）和 创建好的路由routes
diff --git a/src/views/Table_Demo16.vue b/src/views/Table_Demo16.vue
new file mode 100644
index 0000000..d58ecce
--- /dev/null
+++ b/src/views/Table_Demo16.vue
@@ -0,0 +1,64 @@
+<template>
+  <el-config-provider :locale="locale">
+    <el-table :data="tableData">
+      <el-table-column prop="account" label="用户名"></el-table-column>
+      <el-table-column prop="createTime" label="注册时间"></el-table-column>
+      <el-table-column prop="level" label="等级"></el-table-column>
+    </el-table>
+    <el-pagination
+        v-model:currentpage="currentPage"
+        :page-sizes="[5, 10]"
+        :page-size="pageSize"
+        layout="total, prev, pager, next, ->,  jumper, sizes"
+        :total="total"
+        @current-change="handleCurrentChange"
+        @size-change="handleSizeChange"></el-pagination>
+  </el-config-provider>
+
+</template>
+
+<script>
+import locale from 'element-plus/es/locale/lang/zh-cn'
+
+const data = Array.from(Array(114), (v, i) => {
+  return {
+    account: "uaa" + (i + 1),
+    createTime: new Date(Date.now() + Math.ceil(Math.random() * 1000)),
+    level: Math.ceil(Math.random() * 10)
+  }
+})
+export default {
+  name: "Table_Demo16",
+  data() {
+    return {
+      locale,
+      currentPage: 1,
+      pageSize: 5,
+      total: 0,
+      tableData: []
+    };
+  },
+  created() {
+    this.getData(1, this.pageSize);
+  },
+  methods: {
+    getData(page, pageSize) {
+      this.tableData = data.slice((page - 1) * pageSize, page * pageSize)
+      this.total = data.length
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val
+      this.getData(val, this.pageSize)
+    },
+    handleSizeChange(val) {
+      this.pageSize = val
+      this.getData(this.currentPage, val)
+    }
+  }
+
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file