完成分页的练习

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>

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

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>