添加了数据的分页显示，缓解列表渲染压力

src/App.vue

@@ -1,9 +1,11 @@
 <script setup>
-
+import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
 </script>
 
 <template>
+  <el-config-provider :locale="zhCn">
     <router-view></router-view>
+  </el-config-provider>
 </template>
 
 

src/assets/common.css

@@ -1,3 +1,5 @@
+/*通用样式*/
+
 /*浏览器默认margin为8px，会出现滚动条的问题，因此此处设置为0*/
 body {
     margin: 0;
@@ -35,9 +37,11 @@ body {
     transform: translate(-50%, -50%);
 }
 
+/*main容器样式*/
+
 /*与pages组件相关的所有样式*/
 .table {
-    height: 546px;
+    height: 506px;
     margin: 0 30px;
 }
 
@@ -54,3 +58,9 @@ body {
     height: 60px;
     line-height: 60px;
 }
+.pager {
+    width: 100%;
+    height: 40px;
+    /*line-height: 40px;*/
+    /*padding: 10px;*/
+}

src/components/ZooAnimalFormDialog.vue

@@ -48,7 +48,7 @@ export default {
 <template>
   <el-form label-width="auto">
     <el-form-item label="动物ID">
-      <el-input v-model="form.id" placeholder="请设置动物ID" type="number" :disabled="edit || detail"/>
+      <el-input v-model.number="form.id" placeholder="请设置动物ID" type="number" :disabled="edit || detail"/>
     </el-form-item>
     <el-form-item label="动物名称">
       <el-input v-model="form.name" placeholder="动物名称" :disabled="detail"/>

src/components/ZooArchiveFormDialog.vue

@@ -47,10 +47,10 @@ export default {
 <template>
   <el-form label-width="auto">
     <el-form-item label="档案号">
-      <el-input v-model="form.id" type="number" placeholder="记录号" :disabled="edit || detail"/>
+      <el-input v-model.number="form.id" type="number" placeholder="记录号" :disabled="edit || detail"/>
     </el-form-item>
     <el-form-item label="记录的动物ID">
-      <el-input v-model="form.animalId" type="number" placeholder="记录的动物ID" :disabled="detail"/>
+      <el-input v-model.number="form.animalId" type="number" placeholder="记录的动物ID" :disabled="detail"/>
     </el-form-item>
     <el-form-item label="记录的动物名">
       <el-input v-model="form.animalName" placeholder="记录的动物名" :disabled="detail"/>
@@ -90,7 +90,7 @@ export default {
                       :disabled="detail"/>
     </el-form-item>
     <el-form-item label="记录人ID">
-      <el-input v-model="form.roleId" type="number" placeholder="记录人ID" :disabled="detail"/>
+      <el-input v-model.number="form.roleId" type="number" placeholder="记录人ID" :disabled="detail"/>
     </el-form-item>
     <el-form-item label="记录描述">
       <el-input

src/components/ZooBreedingPlanFormDialog.vue

@@ -45,7 +45,7 @@ export default {
 <template>
   <el-form label-width="auto">
     <el-form-item label="饲养计划ID">
-      <el-input v-model="form.id" type="number" placeholder="饲养计划ID" :disabled="edit || detail"/>
+      <el-input v-model.number="form.id" type="number" placeholder="饲养计划ID" :disabled="edit || detail"/>
     </el-form-item>
     <el-form-item label="计划名称">
       <el-input v-model="form.name" placeholder="计划名称" :disabled="detail"/>
@@ -74,7 +74,7 @@ export default {
       </el-radio-group>
     </el-form-item>
     <el-form-item label="执行饲养员">
-      <el-input v-model="form.roleId" type="number" placeholder="执行饲养员" :disabled="detail"/>
+      <el-input v-model.number="form.roleId" type="number" placeholder="执行饲养员" :disabled="detail"/>
     </el-form-item>
     <el-form-item label="计划描述" >
       <el-input

src/components/ZooUserFormDialog.vue

@@ -42,7 +42,7 @@ export default {
 <template>
   <el-form label-width="auto">
     <el-form-item label="用户ID">
-      <el-input v-model="form.id" placeholder="请设置用户ID" type="number"
+      <el-input v-model.number="form.id" placeholder="请设置用户ID" type="number"
                 :disabled="edit || detail"/>
     </el-form-item>
     <el-form-item label="用户名">

src/main.js

@@ -16,4 +16,3 @@ for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
 app.use(router)
 app.use(store)
 app.mount('#app')
-

src/pages/ZooAnimal.vue

@@ -2,7 +2,7 @@
 import {copy, fuzzyMatching, splitKeyWords} from "@/utils/common.js";
 import {Delete, Document, DocumentAdd, Edit, Search, Tickets} from "@element-plus/icons-vue";
 import ZooAnimalFormDialog from "@/components/ZooAnimalFormDialog.vue";
-import {mapActions,mapState} from "vuex";
+import {mapActions, mapMutations, mapState} from "vuex";
 import ZooArchiveTimeline from "@/components/ZooArchiveTimeline.vue";
 
 export default {
@@ -10,6 +10,11 @@ export default {
   components: {ZooArchiveTimeline, ZooAnimalFormDialog},
   data() {
     return {
+      //表格分页显示的数据
+      pagesData: [],
+      pageSize: 20,//每页有多少条数据
+      currentPage: 1,//当前页
+
       // 搜索框的输入
       searchInput: {
         option: '',//状态（0正常 1异常）
@@ -62,6 +67,7 @@ export default {
   },
   methods: {
     ...mapActions(["getAnimals"]),
+    ...mapMutations(['updateAnimalsTableData']),
 
     // 显示详情弹窗
     showDetail(data) {
@@ -237,12 +243,30 @@ export default {
       })
       searchResult = searchResult2
 
-      this.tableData = searchResult
+      this.updateAnimalsTableData(searchResult)
+      this.getPagesData()
     },
+
+    //当前页切换时触发
+    handleCurrentChange(val) {
+      console.log('分页被切换',val)
+      this.currentPage = val
+      this.getPagesData()
+    },
+
+    getPagesData() {
+      console.log('获取分页数据')
+      const start = (this.currentPage - 1) * this.pageSize
+      const end = start + this.pageSize
+      this.pagesData = this.animalsTableData.slice(start, end)
+    }
   },
   mounted() {
     // 加载完成后拉取数据
     this.getAnimals()
+
+    //获取分页后显示的数据
+    this.getPagesData()
   }
 }
 </script>
@@ -275,7 +299,7 @@ export default {
 
     <!--    <hr/>-->
     <div class="table">
-      <el-table :data="animalsTableData" style="width: 100%;height: 100%" empty-text="暂无数据" border stripe>
+      <el-table :data="pagesData" style="width: 100%;height: 100%" border stripe :row-style="{height: '40px'}" :cell-style="{padding:'0'}">
         <el-table-column fixed prop="id" label="动物ID" width="70"/>
         <el-table-column fixed prop="name" label="动物名称" width="100"/>
         <el-table-column prop="sex" label="性别" width="60"/>
@@ -316,6 +340,14 @@ export default {
         </el-table-column>
       </el-table>
     </div>
+
+    <!--  分页-->
+    <div class="pager relative">
+      <div class="center">
+        <el-pagination background layout="total, prev, pager, next, jumper" :total="animalsTableData.length"
+                       :page-size="pageSize" small @current-change="handleCurrentChange"/>
+      </div>
+    </div>
   </div>
 
   <!--  添加动物对话框-->

src/pages/ZooArchive.vue

@@ -1,7 +1,7 @@
 <script>
 import ZooArchiveFormDialog from "@/components/ZooArchiveFormDialog.vue";
-import {Delete, DocumentAdd, Document, Edit, Search, Tickets} from "@element-plus/icons-vue";
+import {Delete, DocumentAdd, Document, Edit, Search, Tickets, Timer} from "@element-plus/icons-vue";
-import {mapState,mapActions} from "vuex";
+import {mapState, mapActions, mapMutations} from "vuex";
 import {copy, splitKeyWords, fuzzyMatching, sortByDateTime} from "@/utils/common.js";
 import ZooArchiveTimeline from "@/components/ZooArchiveTimeline.vue";
 
@@ -10,6 +10,12 @@ export default {
   components: {ZooArchiveTimeline, ZooArchiveFormDialog},
   data() {
     return {
+      //表格分页显示的数据
+      pagesData: [],
+      pageSize: 20,//每页有多少条数据
+      currentPage: 1,//当前页
+      order:1,//排序相关参数
+
       // 搜索框的输入
       searchInput: {
         option: '',//状态（0正常 1异常）
@@ -48,6 +54,9 @@ export default {
     Tickets() {
       return Tickets
     },
+    Timer() {
+      return Timer
+    },
     //endregion
     ...mapState(["archives",'archivesTableData'])
   },
@@ -61,7 +70,9 @@ export default {
     }
   },
   methods: {
+    sortByDateTime,
     ...mapActions(["getArchives"]),
+    ...mapMutations(['updateArchivesTableData']),
 
     // 显示详情弹窗
     showDetail(data) {
@@ -237,12 +248,51 @@ export default {
       })
       searchResult = searchResult2
 
-      this.tableData = searchResult
+      this.updateArchivesTableData(searchResult)
+      this.getPagesData()
     },
+
+    //按时间排序
+    timeSort(){
+      //降序
+      if (this.order===0){
+        this.order++
+        this.updateArchivesTableData(sortByDateTime(copy(this.archivesTableData)))
+        this.getPagesData()
+
+        return
+      }
+      //升序
+      if (this.order===1){
+        this.order--
+        this.updateArchivesTableData(sortByDateTime(copy(this.archivesTableData)).reverse())
+        this.getPagesData()
+      }
+    },
+
+    //分页相关方法
+    //region
+    //当前页切换时触发
+    handleCurrentChange(val) {
+      console.log('分页被切换',val)
+      this.currentPage = val
+      this.getPagesData()
+    },
+
+    getPagesData() {
+      console.log('获取分页数据')
+      const start = (this.currentPage - 1) * this.pageSize
+      const end = start + this.pageSize
+      this.pagesData = this.archivesTableData.slice(start, end)
+    }
+    //endregion
   },
   mounted() {
     // 加载完成后拉取数据
     this.getArchives()
+
+    //获取分页后显示的数据
+    this.getPagesData()
   },
 }
 </script>
@@ -254,6 +304,7 @@ export default {
         <el-button type="primary" :icon="DocumentAdd" @click="dialog.addDialogVisible = true">添加记录</el-button>
       </div>
       <div class="right">
+        <el-button type="primary" :icon="Timer" @click="timeSort" style="margin-right: 40px">按时间升 / 降序</el-button>
         <el-input
             v-model="searchInput.keyword"
             style="width: 500px"
@@ -274,7 +325,7 @@ export default {
     </div>
 
     <div class="table">
-      <el-table :data="archivesTableData" style="width: 100%;height: 100%" empty-text="暂无数据" border stripe :default-sort="{prop: 'date', order: 'descending'}">
+      <el-table :data="pagesData" style="width: 100%;height: 100%" border stripe :row-style="{height: '40px'}" :cell-style="{padding:'0'}">
         <el-table-column fixed prop="id" label="记录号" width="100"/>
         <el-table-column fixed prop="animalId" label="记录的动物ID" width="120"/>
         <el-table-column prop="animalName" label="记录的动物名" width="110"/>
@@ -287,7 +338,7 @@ export default {
           </template>
         </el-table-column>
         <el-table-column prop="type" label="记录类型" width="90"/>
-        <el-table-column prop="date" label="记录日期" width="110" sortable/>
+        <el-table-column prop="date" label="记录日期" width="110"/>
         <el-table-column prop="time" label="记录时间" width="90" />
         <el-table-column prop="roleId" label="记录人ID" width="90"/>
         <el-table-column prop="describe" label="记录描述" width="300"/>
@@ -309,6 +360,14 @@ export default {
         </el-table-column>
       </el-table>
     </div>
+
+    <!--  分页-->
+    <div class="pager relative">
+      <div class="center">
+        <el-pagination background layout="total, prev, pager, next, jumper" :total="archivesTableData.length"
+                       :page-size="pageSize" small @current-change="handleCurrentChange"/>
+      </div>
+    </div>
   </div>
 
   <!--  添加记录对话框-->

src/pages/ZooBreeding.vue

@@ -1,6 +1,6 @@
 <script>
 import ZooBreedingPlanFormDialog from "@/components/ZooBreedingPlanFormDialog.vue";
-import {mapState,mapActions} from "vuex";
+import {mapState, mapActions, mapMutations} from "vuex";
 import {Delete, DocumentAdd, Document,Edit, Search} from "@element-plus/icons-vue";
 import {copy, splitKeyWords,fuzzyMatching} from "@/utils/common.js";
 
@@ -9,7 +9,10 @@ export default {
   components: {ZooBreedingPlanFormDialog},
   data() {
     return {
-      tableData: [],//表格数据
+      //表格分页显示的数据
+      pagesData: [],
+      pageSize: 20,//每页有多少条数据
+      currentPage: 1,//当前页
 
       // 搜索框的输入
       searchInput: {
@@ -58,6 +61,7 @@ export default {
   },
   methods: {
     ...mapActions(["getBreedingPlans"]),
+    ...mapMutations(['updateBreedingPlansTableData']),
 
     //显示详情弹窗
     showDetail(data) {
@@ -212,12 +216,31 @@ export default {
       })
       searchResult = searchResult2
 
-      this.tableData = searchResult
+      this.updateBreedingPlansTableData(searchResult)
+      this.getPagesData()
     },
+
+    //当前页切换时触发
+    handleCurrentChange(val) {
+      console.log('分页被切换',val)
+      this.currentPage = val
+      this.getPagesData()
+    },
+
+    getPagesData() {
+      console.log('获取分页数据')
+      const start = (this.currentPage - 1) * this.pageSize
+      const end = start + this.pageSize
+      this.pagesData = this.breedingPlansTableData.slice(start, end)
+    }
+
   },
   mounted() {
     // 加载完成后拉取数据
     this.getBreedingPlans()
+
+    //获取分页后显示的数据
+    this.getPagesData()
   }
 }
 </script>
@@ -249,7 +272,7 @@ export default {
     </div>
 
     <div class="table">
-      <el-table :data="breedingPlansTableData" style="width: 100%;height: 100%" empty-text="暂无数据" border stripe>
+      <el-table :data="pagesData" style="width: 100%;height: 100%" border stripe :row-style="{height: '40px'}" :cell-style="{padding:'0'}">
         <el-table-column fixed prop="id" label="饲养计划ID" width="100"/>
         <el-table-column fixed prop="name" label="饲养计划名称" width="200"/>
         <el-table-column prop="roleId" label="执行饲养员" width="100"/>
@@ -279,6 +302,14 @@ export default {
         </el-table-column>
       </el-table>
     </div>
+
+    <!--  分页-->
+    <div class="pager relative">
+      <div class="center">
+        <el-pagination background layout="total, prev, pager, next, jumper" :total="breedingPlansTableData.length"
+                       :page-size="pageSize" small @current-change="handleCurrentChange"/>
+      </div>
+    </div>
   </div>
 
   <!--  添加饲养计划对话框-->

src/pages/ZooUser.vue

@@ -1,6 +1,6 @@
 <script>
 import {Delete, Edit, Search, User, Document} from "@element-plus/icons-vue";
-import {mapState,mapActions} from "vuex";
+import {mapState, mapActions, mapMutations} from "vuex";
 import ZooUserFormDialog from "@/components/ZooUserFormDialog.vue";
 import {copy, fuzzyMatching, splitKeyWords, showPassword, hidePassword} from "@/utils/common.js";
 
@@ -10,6 +10,11 @@ export default {
   components: {ZooUserFormDialog},
   data() {
     return {
+      //表格分页显示的数据
+      pagesData: [],
+      pageSize: 20,//每页有多少条数据
+      currentPage: 1,//当前页
+
       //搜索框的输入
       searchInput: {
         option: '',
@@ -60,6 +65,7 @@ export default {
     hidePassword,
     showPassword,
     ...mapActions(['getUsers']),
+    ...mapMutations(['updateUsersTableData']),
 
     //显示详情弹窗
     showDetail(data) {
@@ -196,8 +202,7 @@ export default {
             searchResult.push(copy(e))//如果符合特定权限，则添加到搜索结果
           }
         })
-      }
+      } else { //如果没有选择特定用户身份，代表所有数据都需要参加到下一轮的模糊搜索
-      else { //如果没有选择特定用户身份，代表所有数据都需要参加到下一轮的模糊搜索
         searchResult = copy(this.users)
       }
 
@@ -216,18 +221,37 @@ export default {
       })
       searchResult = searchResult2
 
-      this.tableData = searchResult
+      this.updateUsersTableData(searchResult)
+      this.getPagesData()
     },
+
+    //当前页切换时触发
+    handleCurrentChange(val) {
+      console.log('分页被切换',val)
+      this.currentPage = val
+      this.getPagesData()
+    },
+
+    getPagesData() {
+      console.log('获取分页数据')
+      const start = (this.currentPage - 1) * this.pageSize
+      const end = start + this.pageSize
+      this.pagesData = this.usersTableData.slice(start, end)
+    }
   },
   mounted() {
     // 加载完成后拉取数据
     this.getUsers()
+
+    //获取分页后显示的数据
+    this.getPagesData()
   },
 }
 </script>
 
 <template>
   <div id="users-root">
+    <!--    头部-->
     <div class="select">
       <div class="left">
         <el-button type="primary" :icon="User" @click="dialog.addDialogVisible = true">创建用户</el-button>
@@ -253,9 +277,9 @@ export default {
       </div>
     </div>
 
-    <!--    <hr/>-->
+    <!--    数据-->
     <div class="table">
-      <el-table :data="usersTableData" style="height: 100%" empty-text="暂无数据" border stripe>
+      <el-table :data="pagesData" style="height: 100%" border stripe :row-style="{height: '40px'}" :cell-style="{padding:'0'}">
         <el-table-column fixed prop="id" label="用户ID" width="70"/>
         <el-table-column fixed prop="username" label="用户名" width="150"/>
         <el-table-column prop="password" label="密码" width="150">
@@ -286,7 +310,17 @@ export default {
         </el-table-column>
       </el-table>
     </div>
+
+    <!--  分页-->
+    <div class="pager relative">
+      <div class="center">
+        <el-pagination background layout="total, prev, pager, next, jumper" :total="usersTableData.length"
+                       :page-size="pageSize" small @current-change="handleCurrentChange"/>
       </div>
+    </div>
+  </div>
+
+
 
   <!--  添加用户对话框-->
   <el-dialog v-model="dialog.addDialogVisible" title="添加用户" width="400" align-center draggable overflow>

src/pages/data.vue

@@ -43,6 +43,7 @@ export default {
   <el-button type="primary" @click="animalsData">生成动物信息</el-button>
   <el-button type="primary" @click="breedingPlansData">生成饲养计划信息</el-button>
   <el-button type="primary" @click="archiveData">生成档案信息</el-button>
+  <el-button type="primary" @click="$router.push('/login')">跳转登录</el-button>
 </template>
 
 <style scoped>

src/store/index.js

@@ -51,28 +51,43 @@ const mutations = {
         state.users = value
 
         //复制一份给前端表格展示，不轻易修改源数据
-        state.usersTableData = copy(value)
+        state.usersTableData = copy(state.users)
     },
+    updateUsersTableData(state, value) {
+        state.usersTableData = value
+    },
+
     //更新动物集合
     updateAnimals(state, value) {
         state.animals = value
 
         //复制一份给前端表格展示，不轻易修改源数据
-        state.animalsTableData = copy(value)
+        state.animalsTableData = copy(state.animals)
     },
+    updateAnimalsTableData(state, value) {
+        state.animalsTableData = value
+    },
+
     //更新饲养计划
     updateBreedingPlans(state, value) {
         state.breedingPlans = value
 
         //复制一份给前端表格展示，不轻易修改源数据
-        state.breedingPlansTableData = copy(value)
+        state.breedingPlansTableData = copy(state.breedingPlans)
     },
+    updateBreedingPlansTableData(state, value) {
+        state.breedingPlansTableData = value
+    },
+
     //更新动物档案
     updateArchives(state, value) {
         state.archives = value
 
         //复制一份给前端表格展示，不轻易修改源数据
-        state.archivesTableData = copy(value)
+        state.archivesTableData = copy(state.archives)
+    },
+    updateArchivesTableData(state, value) {
+        state.archivesTableData = value
     }
 }
 

src/utils/common.js

@@ -287,4 +287,6 @@ export function sortByDateTime(archives) {
             return Number(b.time.split(':').join('')) - Number(a.time.split(':').join(''))
         }
     })
+
+    return archives
 }