Vue3自定义文件列表页面（含上传、搜索、复制链接）

news2024/11/17 21:26:53

文章目录

一、代码展示
二、代码解读
三、结果展示

一、代码展示

<template>
  <div class="container">
    <h1>文件列表</h1>
    <div class="header-actions">
      <a-input  placeholder="输入关键词搜索"  v-model:value="search" style="width: 200px;" />
      <a-button type="primary"  @click="fetchResource">搜索</a-button>
      <a-button type="primary" @click="showUploadModal">上传文件</a-button>
    </div>
    <div class="table-container" >
      <a-table :columns="columns" :dataSource="dataSource" :pagination="pagination" :current="pagination.current" :pageSize="pagination.pageSize" @change="handleTableChange">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'operation'">
            <a @click="copyLink(record.fileLink)">复制链接</a>
          </template>
        </template>
      </a-table>
    </div>
    <a-modal v-model:visible="uploadModalVisible" title="上传文件" @ok="handleUpload" @cancel="closeUploadModal">
      <a-form :form="uploadForm" layout="vertical">
        <a-form-item label="文件名" required>
          <a-input v-model:value="uploadForm.title" />
        </a-form-item>
        <a-form-item label="文件链接" required>
          <a-input v-model:value="uploadForm.source" />
        </a-form-item>
        <a-form-item label="文件类型（阿里、百度等）" required>
          <a-input v-model:value="uploadForm.type" />
        </a-form-item>
        <a-form-item label="备注" >
          <a-input v-model:value="uploadForm.remark" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup>
 略
</script>

<style scoped >

.table-container {
 min-height: 80vh;

}
.container {
margin-bottom: 20px;
  margin-top: 80px;
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
  margin-bottom: 10px;
}

.header-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

a-input {
  width: 200px;
}

.table-container {
  margin-top: 20px;
}


</style>

二、代码解读

<template> 部分是Vue文件的模板部分，用于定义页面的结构和布局。在这段代码中，<template> 主要包括了页面的 HTML 结构和 Ant Design Vue 组件的使用。下面是对 <template> 部分的详细解释：

<div class="container">: 整个页面的容器，用于包裹所有内容，设置了一些样式，如边框圆角和阴影，使页面看起来更加美观。
<h1>: 页面标题，显示"文件列表"，用于标识页面的主题。
<div class="header-actions">: 头部操作区域，包括搜索框、搜索按钮和上传文件按钮。这里使用了 Ant Design Vue 的样式和组件。
- <a-input>: Ant Design Vue 中的输入框组件，用于输入搜索关键词。通过 v-model:value="search" 进行双向绑定，将输入框的值与 search 变量关联。
- <a-button>: Ant Design Vue 中的按钮组件，包括搜索和上传文件两个按钮。使用 @click 监听按钮点击事件，分别调用 fetchResource 和 showUploadModal 方法。
<a-table>: Ant Design Vue 中的表格组件，用于展示文件列表。通过 :columns、:dataSource、:pagination 等属性将数据和配置传递给表格组件。
- :columns="columns": 指定表格的列配置，定义了文件名、来源、类型、上传者、上传时间等列。
- :dataSource="dataSource": 表格的数据源，使用了 Vue 的响应式引用 dataSource。
- :pagination="pagination": 表格分页的配置，包括是否显示大小调整器、是否显示快速跳转、每页显示数量等。
- @change="handleTableChange": 监听表格分页、排序、筛选等变化，触发 handleTableChange 方法进行处理。
- <template #bodyCell="{ column, record }">: 自定义表格单元格内容，在操作列显示"复制链接"的链接，通过调用 copyLink 方法实现。
<a-modal>: 弹出的上传文件的模态框，包含文件名、文件链接、文件类型等输入框。通过 v-model:visible 控制模态框的显示和隐藏，使用 @ok 和 @cancel 监听确定和取消按钮的点击事件，分别调用 handleUpload 和 closeUploadModal 方法。
- <a-form>: Ant Design Vue 中的表单组件，包含文件名、文件链接、文件类型、备注等表单项。
  - <a-form-item>: 表单项，包括文件名、文件链接、文件类型和备注，其中文件名、文件链接和文件类型为必填项。
  - <a-input>: 输入框组件，用于输入文件名、文件链接、文件类型和备注，通过 v-model:value 进行双向绑定。