怎么做网站策划的模板,如何注册咨询公司,百度网站,网站关键词优化费用文章目录 一、代码展示二、代码解读三、结果展示 一、代码展示
templatediv classcontainerh1文件列表/h1div classheader-actionsa-input placeholder输入关键词搜索 v-model:valuetemplatediv classcontainerh1文件列表/h1div classheader-actionsa-input placeholder输入关键词搜索 v-model:valuesearch stylewidth: 200px; /a-button typeprimary clickfetchResource搜索/a-buttona-button typeprimary clickshowUploadModal上传文件/a-button/divdiv classtable-container a-table :columnscolumns :dataSourcedataSource :paginationpagination :currentpagination.current :pageSizepagination.pageSize changehandleTableChangetemplate #bodyCell{ column, record }template v-ifcolumn.key operationa clickcopyLink(record.fileLink)复制链接/a/template/template/a-table/diva-modal v-model:visibleuploadModalVisible title上传文件 okhandleUpload cancelcloseUploadModala-form :formuploadForm layoutverticala-form-item label文件名 requireda-input v-model:valueuploadForm.title //a-form-itema-form-item label文件链接 requireda-input v-model:valueuploadForm.source //a-form-itema-form-item label文件类型阿里、百度等 requireda-input v-model:valueuploadForm.type //a-form-itema-form-item label备注 a-input v-model:valueuploadForm.remark //a-form-item/a-form/a-modal/div
/templatescript setup略
/scriptstyle 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 classcontainer: 整个页面的容器用于包裹所有内容设置了一些样式如边框圆角和阴影使页面看起来更加美观。 h1: 页面标题显示文件列表用于标识页面的主题。 div classheader-actions: 头部操作区域包括搜索框、搜索按钮和上传文件按钮。这里使用了 Ant Design Vue 的样式和组件。 a-input: Ant Design Vue 中的输入框组件用于输入搜索关键词。通过 v-model:valuesearch 进行双向绑定将输入框的值与 search 变量关联。 a-button: Ant Design Vue 中的按钮组件包括搜索和上传文件两个按钮。使用 click 监听按钮点击事件分别调用 fetchResource 和 showUploadModal 方法。 a-table: Ant Design Vue 中的表格组件用于展示文件列表。通过 :columns、:dataSource、:pagination 等属性将数据和配置传递给表格组件。 :columnscolumns: 指定表格的列配置定义了文件名、来源、类型、上传者、上传时间等列。 :dataSourcedataSource: 表格的数据源使用了 Vue 的响应式引用 dataSource。 :paginationpagination: 表格分页的配置包括是否显示大小调整器、是否显示快速跳转、每页显示数量等。 changehandleTableChange: 监听表格分页、排序、筛选等变化触发 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 进行双向绑定。
总体而言template 部分定义了页面的结构包括标题、搜索框、按钮、文件列表和上传文件模态框等组件同时使用了 Ant Design Vue 提供的组件来实现样式和交互效果。
三、结果展示
