From 7226a583922cbb356e3d118a2adf597091af25b4 Mon Sep 17 00:00:00 2001
From: MoYi <1545929126@qq.com>
Date: Fri, 17 Nov 2023 15:43:15 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue | 100 +++++++++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 87 insertions(+), 13 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index e3ced32..248cbe4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,7 +6,9 @@
         <div>
           <!-- 搜索输入框 -->
           <el-input class="InputText" v-model="searchInput" placeholder="请输入你要搜索的文件名称">
-            <template #append>搜索</template>
+            <template #append>
+              <el-button @click="handleSearch">搜索</el-button>
+            </template>
           </el-input>
         </div>
         <div class="HomeHeadAvatar">
@@ -16,24 +18,36 @@
       </el-col>
     </el-row>
     <!-- 主页左右布局 -->
-    <el-row class="LeftAndRight">
+
+    <el-row>
       <el-col :span="leftColumnSpan" class="Left">
         <!-- 文件列表表格 -->
-        <el-table :data="tableData" style="width: 100%">
+        <el-table :data="pagedTableData" style="width: 100%" :empty-text="'暂无数据'">
           <el-table-column prop="id" label="ID" width="50"/>
           <el-table-column prop="fileName" label="文件名" width="150"/>
           <el-table-column prop="format" label="文件格式" width="100"/>
           <el-table-column prop="fileSize" label="文件大小" width="100"/>
           <el-table-column prop="uploader" label="上传者" width="100"/>
           <el-table-column fixed="right" label="操作" width="100">
-            <template #default>
+            <template #default="scope">
               <!-- 下载按钮 -->
-              <el-button link type="primary" size="small" @click="handleDownload">下载</el-button>
+              <el-button link type="primary" size="small" @click="handleDownload(scope.row)">下载</el-button>
               <!-- 删除按钮 -->
-              <el-button link type="danger" size="small" @click="handleDelete">删除</el-button>
+              <el-button link type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
             </template>
           </el-table-column>
         </el-table>
+
+        <!-- 分页 -->
+        <div class="LeftAndRightContainer">
+          <el-pagination
+              :page-size="pageSize"
+              :pager-count="pagerCount"
+              layout="prev, pager, next"
+              :total="totalItems"
+              @current-change="handlePageChange"
+          />
+        </div>
       </el-col>
       <el-col :span="rightColumnSpan" class="Right">
         Right
@@ -43,7 +57,7 @@
 </template>
 
 <script setup lang="ts">
-import {ref, onMounted, watch} from 'vue';
+import {ref, onMounted, watch, computed} from 'vue';
 import {useWindowSize} from '@vueuse/core';
 
 // 左侧栏宽度变量
@@ -52,8 +66,8 @@ const leftColumnSpan = ref(18);
 const rightColumnSpan = ref(6);
 const {width} = useWindowSize();
 const searchInput = ref('');
-// 文件列表数据
-const tableData = [
+// 原始文件列表数据
+const originalTableData = [
   {'id': 1, 'fileName': '文件名称Test_1', 'format': 'ttf', 'fileSize': '10001kb', 'uploader': 'MoYiJiangNan'},
   {'id': 2, 'fileName': '文件名称Test_2', 'format': 'ttf', 'fileSize': '10002kb', 'uploader': 'MoYiJiangNan'},
   {'id': 3, 'fileName': '文件名称Test_3', 'format': 'ttf', 'fileSize': '10003kb', 'uploader': 'MoYiJiangNan'},
@@ -74,8 +88,65 @@ const tableData = [
   {'id': 18, 'fileName': '文件名称Test_18', 'format': 'ttf', 'fileSize': '10018kb', 'uploader': 'MoYiJiangNan'},
   {'id': 19, 'fileName': '文件名称Test_19', 'format': 'ttf', 'fileSize': '10019kb', 'uploader': 'MoYiJiangNan'},
   {'id': 20, 'fileName': '文件名称Test_20', 'format': 'ttf', 'fileSize': '10020kb', 'uploader': 'MoYiJiangNan'},
+  {'id': 21, 'fileName': '文件名称Test_1', 'format': 'ttf', 'fileSize': '10001kb', 'uploader': 'MoYiJiangNan'},
+  {'id': 22, 'fileName': '文件名称Test_2', 'format': 'ttf', 'fileSize': '10002kb', 'uploader': 'MoYiJiangNan'},
+  {'id': 23, 'fileName': '文件名称Test_3', 'format': 'ttf', 'fileSize': '10003kb', 'uploader': 'MoYiJiangNan'},
+  {'id': 24, 'fileName': '文件名称Test_4', 'format': 'ttf', 'fileSize': '10004kb', 'uploader': 'MoYiJiangNan'},
+  {'id': 25, 'fileName': '文件名称Test_5', 'format': 'ttf', 'fileSize': '10005kb', 'uploader': 'MoYiJiangNan'},
+  {'id': 26, 'fileName': '文件名称Test_6', 'format': 'ttf', 'fileSize': '10006kb', 'uploader': 'MoYiJiangNan'},
+  {'id': 27, 'fileName': '文件名称Test_7', 'format': 'ttf', 'fileSize': '10007kb', 'uploader': 'MoYiJiangNan'},
+  {'id': 28, 'fileName': '文件名称Test_8', 'format': 'ttf', 'fileSize': '10008kb', 'uploader': 'MoYiJiangNan'},
+  {'id': 29, 'fileName': '文件名称Test_9', 'format': 'ttf', 'fileSize': '10009kb', 'uploader': 'MoYiJiangNan'},
+  {'id': 30, 'fileName': '文件名称Test_10', 'format': 'ttf', 'fileSize': '10010kb', 'uploader': 'MoYiJiangNan'},
+  {'id': 31, 'fileName': '文件名称Test_11', 'format': 'ttf', 'fileSize': '10011kb', 'uploader': 'MoYiJiangNan'},
+  {'id': 32, 'fileName': '文件名称Test_12', 'format': 'ttf', 'fileSize': '10012kb', 'uploader': 'MoYiJiangNan'},
+  {'id': 33, 'fileName': '文件名称Test_13', 'format': 'ttf', 'fileSize': '10013kb', 'uploader': 'MoYiJiangNan'},
+  {'id': 34, 'fileName': '文件名称Test_14', 'format': 'ttf', 'fileSize': '10014kb', 'uploader': 'MoYiJiangNan'},
+  {'id': 35, 'fileName': '文件名称Test_15', 'format': 'ttf', 'fileSize': '10015kb', 'uploader': 'MoYiJiangNan'},
+  {'id': 36, 'fileName': '文件名称Test_16', 'format': 'ttf', 'fileSize': '10016kb', 'uploader': 'MoYiJiangNan'},
+  {'id': 37, 'fileName': '文件名称Test_17', 'format': 'ttf', 'fileSize': '10017kb', 'uploader': 'MoYiJiangNan'},
+  {'id': 38, 'fileName': '文件名称Test_18', 'format': 'ttf', 'fileSize': '10018kb', 'uploader': 'MoYiJiangNan'},
+  {'id': 39, 'fileName': '文件名称Test_19', 'format': 'ttf', 'fileSize': '10019kb', 'uploader': 'MoYiJiangNan'},
+  {'id': 40, 'fileName': '文件名称Test_20', 'format': 'ttf', 'fileSize': '10020kb', 'uploader': 'MoYiJiangNan'},
+  // ... 添加其他文件数据
 ];
 
+// 文件列表数据
+const tableData = ref(originalTableData);
+// 定义分页相关变量
+const pageSize = ref(15);
+const pagerCount = ref(6);
+const totalItems = ref(tableData.value.length);
+const currentPage = ref(1);
+
+// 计算分页后的文件列表数据
+const pagedTableData = computed(() => {
+  const startIndex = (currentPage.value - 1) * pageSize.value;
+  const endIndex = startIndex + pageSize.value;
+  return tableData.value.slice(startIndex, endIndex);
+});
+
+// 处理分页切换事件
+const handlePageChange = (page: number) => {
+  currentPage.value = page;
+};
+
+// 搜索功能
+const handleSearch = () => {
+  const query = searchInput.value.trim().toLowerCase();
+  if (!query) {
+    // 如果搜索关键字为空，显示全部文件
+    tableData.value = originalTableData;
+  } else {
+    // 根据搜索关键字过滤文件列表
+    tableData.value = originalTableData.filter((item) => {
+      return item.fileName.toLowerCase().includes(query);
+    });
+  }
+  currentPage.value = 1; // 重置当前页为第一页
+  totalItems.value = tableData.value.length; // 更新 totalItems
+};
+
 // 更新左侧栏宽度函数
 const updateLeftColumnSpan = () => {
   if (width.value <= 768) {
@@ -101,7 +172,6 @@ const handleDelete = () => {
 </script>
 
 <style scoped>
-/* 样式部分 */
 .HomeHead {
   width: calc(100% - 20px);
   height: 5ch;
@@ -112,11 +182,11 @@ const handleDelete = () => {
   text-align: center;
 }
 
-.LeftAndRight {
-  height: calc(100vh - 5ch - 30px);
-  margin: 0 10px 10px 10px;
+.LeftAndRightContainer {
   display: flex;
+  flex-direction: column;
   justify-content: center;
+  align-items: center;
   text-align: center;
 }
 
@@ -155,4 +225,8 @@ const handleDelete = () => {
   margin: 0 0 0 5px;
   width: 80%;
 }
+
+.el-table .el-table__body tr {
+  height: 10px; /* 修改行高为40px，根据需求调整 */
+}
 </style>
\ No newline at end of file