当前位置：首页 > news >正文

Vue.js 实现下载模板和导入模板、数据比对功能核心实现。

news 来源：原创 2025/8/22 22:44:01

在前端开发中，数据比对是一个常见需求，尤其在资产管理等场景中。本文将基于 Vue.js 和 Element UI，通过一个简化的代码示例，展示如何实现“新建比对”和“开始比对”功能的核心部分。

一、功能简介

我们将聚焦两个核心功能：

新建比对：打开上传对话框，允许用户选择文件。
开始比对：上传文件并调用后端接口进行数据比对，同时展示进度。

以下是逐步拆分的实现细节。

二、核心代码实现

1. 新建比对

“新建比对”功能通过一个按钮触发，打开文件上传对话框。

模板部分

在页面中添加按钮和上传对话框：

<template><MainCard><!-- 新建比对按钮 --><el-row><el-col :span="24"><el-button type="primary" @click="openImportDialog" class="mg20">新建比对</el-button></el-col></el-row><!-- 导入对话框 --><el-dialog title="数据比对" :visible.sync="visible" width="800px" append-to-body><div class="importDialogBody"><p class="title">数据上传</p><div class="text-box"><el-uploadref="upload":limit="limit":on-remove="handleRemove":before-upload="handleBeforeUpload":on-change="handleFileChange":file-list="fileList":auto-upload="false"action="#"drag><i class="el-icon-upload"></i><div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div></el-upload></div></div><div slot="footer" class="dialog-footer"><el-button @click="visible = false">取消</el-button><el-button type="primary" @click="confirmImport" :loading="buttonLoading" :disabled="!fileRaw">开始比对</el-button></div></el-dialog></MainCard>
</template>

点击“新建比对”按钮，调用 openImportDialog 方法打开对话框。
对话框中包含一个 el-upload 组件，用户可拖拽或点击上传文件。

脚本部分

对应的逻辑如下：

<script>
export default {data() {return {visible: false, // 控制对话框显示buttonLoading: false, // 按钮加载状态fileRaw: null, // 上传的原始文件fileList: [], // 文件列表limit: 1 // 限制上传一个文件};},methods: {// 打开导入对话框openImportDialog() {this.visible = true;this.$nextTick(() => {this.resetUpload(); // 重置上传状态});},// 重置上传组件resetUpload() {this.$refs['upload'].clearFiles();this.fileList = [];this.fileRaw = null;},// 文件移除时更新状态handleRemove(file, fileList) {this.fileList = fileList;if (fileList.length === 0) this.fileRaw = null;},// 文件选择时更新状态handleFileChange(file, fileList) {this.fileRaw = file.raw;this.fileList = fileList;},// 文件上传前校验handleBeforeUpload(file) {if (!this.validFile(file)) {return false;}this.fileRaw = file;this.fileList = [file];return false; // 阻止自动上传},// 文件校验逻辑validFile(file) {let fileName = file.name;const isLt10M = file.size / 1024 / 1024 < 10;const fitNameArr = ['xls', 'xlsx'];const index = fileName.lastIndexOf('.');if (index !== -1) {const suffName = fileName.slice(index + 1);if (!isLt10M) {this.$message({ message: '上传文件大小不能超过 10MB!', type: 'warning' });this.fileList = [];return false;}if (!fitNameArr.includes(suffName)) {this.$message.warning('只能上传xls或者xlsx格式的文件');this.fileList = [];return false;}} else {this.$message.warning('文件名称不合法');this.fileList = [];return false;}return true;}}
};
</script>

openImportDialog 打开对话框并重置上传状态。
handleBeforeUpload 校验文件大小（<10MB）和格式（xls/xlsx）。
handleFileChange 更新 fileRaw，用于后续比对。

2. 开始比对

点击“开始比对”按钮后，上传文件并调用后端接口。

模板部分

对话框底部已包含“开始比对”按钮，绑定 confirmImport 方法。

脚本部分

添加比对逻辑：

<script>
import { compareData } from '@/api/asset/assetReport/datacomparison';export default {data() {return {visible: false,buttonLoading: false,fileRaw: null,fileList: [],limit: 1};},methods: {// 打开导入对话框（同上，略）// 文件相关方法（同上，略）// 开始比对async confirmImport() {if (!this.fileRaw) {this.$message.warning('请先选择需要比对的文档');return;}this.buttonLoading = true;const formData = new FormData();formData.append('file', this.fileRaw);try {const response = await compareData(formData);this.$message.success('比对完成');} catch (error) {this.$message.error('比对失败');} finally {this.buttonLoading = false;this.visible = false;}}}
};
</script>

检查是否选择了文件，未选择则提示用户。
使用 FormData 封装文件，调用 compareData 接口进行比对。
根据结果显示成功或失败提示，并关闭对话框。

三、样式优化

为对话框添加简洁样式，提升用户体验：

<style lang="scss" scoped>
.mg20 {margin-bottom: 10px;
}.importDialogBody {font-size: 13px;color: #606266;.title {font-weight: bold;margin-bottom: 10px;font-size: 16px;padding-left: 8px;position: relative;}.title::before {position: absolute;left: 0;top: 52%;transform: translateY(-50%);content: '';width: 4px;border-radius: 2px;background: #3d63c8;height: 90%;}.text-box {display: flex;flex-direction: column;align-items: center;}
}
</style>

.mg20 为按钮添加底部间距。
.importDialogBody 美化上传区域，标题前添加蓝色标识线。

四、总结

通过以上代码，我们实现了“新建比对”和“开始比对”的核心功能：

点击“新建比对”打开上传对话框，支持文件校验。
点击“开始比对”上传文件并调用后端接口，完成数据比对。

Vue.js 实现下载模板和导入模板、数据比对功能核心实现。

在前端开发中，数据比对是一个常见需求，尤其在资产管理等场景中。本文将基于 Vue.js 和 Element UI，通过一个简化的代码示例，展示如何实现“新建比对”和“开始比对”功能的核心部分。一、功能简介我们将聚焦两个核心功能&…...

编程日记 2025/8/22 22:44:01

通过世界排名第一的免费开源ERP，构建富有弹性的智能供应链

概述现行供应链模式的结构性弱点凸显了对整个行业进行重塑的必要性。正确策略和支持可以帮助您重塑供应链，降低成本，实现业务转型。开源智造（OSCG）所推出的Odoo免费开源ERP解决方案，将供应链转化为具有快速响应能力的…...

编程日记 2025/8/22 11:18:04

自动驾驶数据闭环中的MLOps实践：Kubernetes、Kubeflow与PyTorch的协同应用

目录 1. 引言 2. 系统架构与技术栈 2.1 Kubernetes：弹性可伸缩的计算资源池 2.2 Kubeflow：端到端的MLOps工作流 2.3 PyTorch分布式训练：高效的模型训练引擎 3. 增强型数据处理技术 3.1 联邦学习聚合 3.2 在线学习更新 3.3 角落案例挖…...

编程日记 2025/8/20 10:12:32

如何在Linux中更改主机名？修改主机最新方法

hostname是一个Linux操作系统的常用功能，允许识别服务器， 这可用于容易地确定两个服务器之间的差异。除了服务器的个人识别，主机名与大多数网络进程一起使用，其他应用程序也可能依赖于此，本期将指导大家如何在Linux中…...

编程日记 2025/8/23 10:14:18

分盘，内网

分盘查看创建分区 # 查看磁盘信息（确认目标磁盘，如/dev/sda） lsblkfdisk -l# 启动fdisk工具（需root权限） sudo fdisk /dev/sda# 步骤1：删除旧分区表（谨慎操作！） Comma…...

编程日记 2025/8/21 5:33:25

alter table examination_info drop index uniq_idx_exam_id; alter table examination_info drop index full_idx_tag; 描述请删除examination_info表上的唯一索引uniq_idx_exam_id和全文索引full_idx_tag。后台会通过 SHOW INDEX FROM examination_info 来对比输出结果。…...

编程日记 2025/8/17 23:37:40

【SQL】子查询详解（附例题）

子查询子查询的表示形式为：(SELECT 语句)，它是IN、EXISTS等运算符的运算数，它也出现于FROM子句和VALUES子句。包含子查询的查询叫做嵌套查询。嵌套查询分为相关嵌套查询和不想关嵌套查询 WHERE子句中的子查询比较运算符子查询的结果是…...

编程日记 2025/8/19 14:05:18

AI和传统命理的结合

deepseek的火热也带来了AI命理学的爆火 1. 精准解析：AI加持，数据驱动通过先进的人工智能算法，我们对海量的传统命理知识进行了深度学习和整合。无论是八字排盘、紫微斗数，还是风水布局、生肖运势，AI都能根据您的个…...

编程日记 2025/8/22 21:53:51

Java设计模式之抽象工厂模式：从入门到架构级实践

设计模式是构建高质量软件的基石，而抽象工厂模式作为创建型模式的代表，不仅解决了对象创建的问题，更在架构设计中扮演着关键角色。本文将从基础到高阶、从单机到分布式，全面剖析抽象工厂模式的应用场景与实战技巧。一、从问题出发…...

编程日记 2025/8/21 18:01:16

摄像头模块对焦方式的类型

摄像头模块的对焦方式直接影响成像清晰度和使用场景适应性，不同技术各有其优缺点。以下是常见对焦方式及其原理、特点和应用场景的详细说明： ‌1. 固定对焦（Fixed Focus）‌ ‌原理‌：镜头固定在特定距离（…...

编程日记 2025/8/22 21:47:19

九屏图分析法以手机为例

九屏图的两种视角时间九屏图：关注系统的时间演化（过去、现在、未来），强调技术或产品的生命周期。空间九屏图：关注系统的层次结构（子系统、本系统、超系统&#xff0…...

编程日记 2025/8/21 10:59:48

【模板】前缀和

链接：【模板】前缀和题目描述给定一个长度为n的数组a1,a2,....ana_1, a_2,....a_na1,a2,....an. 接下来有q次查询, 每次查询有两个参数l, r. 对于每个询问, 请输出alal1....ara_la_{l1}....a_ralal1....ar 输入描述: 第一行包含两个整数n和q. 第…...

编程日记 2025/8/19 12:28:07

微信小程序多线程的使用

微信小程序的多线程主要通过 Worker 实现，用于处理复杂计算任务以避免阻塞主线程。以下是完整的使用指南和最佳实践： 一、Worker 核心机制运行环境隔离主线程与 Worker 线程内存不共享通信通过 postMessage 完成（数据拷贝而非共享&#xff…...

编程日记 2025/8/20 15:01:28

FPGA设计职位介绍｜如何成为一名合格的数字前端设计工程师？

近年来FPGA行业持续升温，随着国产替代浪潮的加快推进，国家对可重构计算、边缘计算、自主可控等领域的扶持力度不断加大，FPGA作为灵活性高、可编程性强的重要芯片种类，在人工智能、通信、工业控制等应用中广受青睐。FPGA人才长期紧…...

编程日记 2025/8/19 1:23:16

Shell 基础

刷题： 思维导图： #include <stdio.h> // 手动定义32位有符号整数的范围 #define INT_MAX 2147483647 #define INT_MIN (-2147483647 - 1) int reverse(int x) { int rev 0; // 初始化反转后的数字为0 while (x ! 0) { // 当x不为0时&#xff…...

编程日记 2025/8/23 2:08:00

软件信息安全性测试如何进行?有哪些注意事项?

随着信息技术的高速发展，软件已经成为我们生活和工作中不可或缺的一部分。然而，随着软件产品的广泛普及，软件信息安全性问题也日益凸显，因此软件信息安全性测试必不可少。那么软件信息安全性测试应如何进行呢?在进行过程中又有哪…...

编程日记 2025/8/20 14:48:13

ragflow开启https访问:浏览器将自签证书添加到受信任的根证书颁发机构 ,当证书过期,还需要添加吗?

核心机制解析信任链原理：当您将自签名证书添加到"受信任的根证书颁发机构"后，系统会永久信任该证书的颁发者身份但证书本身的有效期和密钥匹配仍需验证证书更新的两种情况：相同密钥续期：如果新证书使用相同的密钥对，浏览器通常会保持信任重新生成密钥：如果执…...

编程日记 2025/8/23 10:12:11

ragflow开启https访问:自签证书到期了,如何自动生成新证书

自动生成和更新自签名证书的方案对于使用公网IP和自签名证书的RagFlow服务，要实现证书的自动生成和更新，可以采用以下方案：方案一：使用脚本自动更新（推荐） 1. 创建自动更新脚本在服务器上创建 ./docker/nginx/auto_renew_cert.sh 文件： #!/bin/bash# 证书路径 C…...

编程日记 2025/8/20 2:26:26

LLM面试题八

推荐算法工程师面试题二分类的分类损失函数？ 二分类的分类损失函数一般采用交叉熵(Cross Entropy)损失函数，即CE损失函数。二分类问题的CE损失函数可以写成：其中，y是真实标签，p是预测标签，取值为0或1。 …...

编程日记 2025/8/20 22:00:25

小行星轨道预测是怎么做的？从天文观测到 AI 模型的完整路径

目录 ☄️ 小行星轨道预测是怎么做的？从天文观测到 AI 模型的完整路径 🌌 一、什么是小行星轨道预测？ 🔭 二、观测数据从哪里来？ 🧮 三、经典动力学方法：数值积分 🤖 四、现代方…...

编程日记 2025/8/22 17:20:13

华为OD机试2025A卷 - 正整数到excel编号之间的转换（Java Python JS C++ C ）

最新华为OD机试真题目录：点击查看目录华为OD面试真题精选：点击立即查看题目描述用过 excel 的都知道excel的列编号是这样的： a b c … z aa ab ac … az ba bb bc … yz za zb zc … zz aaa aab aac … 分别代表以下编号： 1 2 3 … 26 27 28 29 … 52 53 54 55…...

编程日记 2025/8/19 13:25:29

2024年-全国大学生数学建模竞赛(CUMCM)试题速浏、分类及浅析

2024年-全国大学生数学建模竞赛(CUMCM)试题速浏、分类及浅析全国大学生数学建模竞赛（China Undergraduate Mathematical Contest in Modeling）是国家教委高教司和中国工业与应用数学学会共同主办的面向全国大学生的群众性科技活动，目的在于激…...

编程日记 2025/8/23 13:54:22

Vue3 实现进度条组件

样式如下，代码如下 <script setup> import { computed, defineEmits, defineProps, onMounted, ref, watch } from vue// 定义 props const props defineProps({// 初始百分比initialPercentage: {type: Number,default: 0,}, })// 定义 emits const emits…...

编程日记 2025/8/20 20:06:44

I²S协议概述与信号线说明

IIS协议概述 IS（Inter-IC Sound）协议，又称 IIS（Inter-IC Sound），是一种专门用于数字音频数据传输的串行总线标准，由飞利浦（Philips）公司提出。该协议通常用于微控制器…...

编程日记 2025/8/21 17:59:07

Redis 面经

1、说说什么是 Redis? Redis 是 Remote Dictionary Service 三个单词中加粗字母的组合，是一种基于键值对的 NoSQL 数据库。但比一般的键值对，比如 HashMap 强大的多，Redis 中的 value 支持 string、hash、 list、set、zset、Bitmaps、Hyper…...

编程日记 2025/8/21 4:11:09

设计模式四、行为设计模式（1）

在设计模式的世界里，23种经典设计模式通常被分为三大类：创建型、结构型和行为型。创建型设计模式关注对象创建的问题，结构性设计模式关注于类或对象的组合和组装的问题，行为型设计模式则主要关注于类或对象之间的交互问题。行为设…...

编程日记 2025/8/17 22:14:12

Python错误分析与调试

在Python编程的过程中，我们难免会遇到各种各样的错误，而有效地分析和调试这些错误，能让我们的代码快速恢复正常运行，今天就来和大家聊聊Python中错误分析与调试的相关内容。错误分析 Python中的错误大致可以分为语法错误和逻…...

编程日记 2025/8/20 4:10:55

vue实现大转盘抽奖

用vue实现一个简单的大转盘抽奖案例大转盘一转盘布局 <div class"lucky-wheel-content"><div class"lucky-wheel-prize" :style"wheelStyle" :class"isStart ? animated-icon : "transitionend"onWheelTransitionE…...

编程日记 2025/8/19 14:25:12

《从零搭建Vue3项目实战》（AI辅助搭建Vue3+ElemntPlus后台管理项目）零基础入门系列第二篇:项目创建和初始化

🤟致敬读者 🟩感谢阅读🟦笑口常开🟪生日快乐⬛早点睡觉 📘博主相关 🟧博主信息🟨博客首页🟫专栏推荐🟥活动信息文章目录《从零搭建Vue3项目实战》（AI辅助…...

编程日记 2025/8/18 0:42:58

yum拒绝连接

YUM 拒绝连接的解决方案当遇到 yum 无法连接的问题时，通常可以通过更换为更稳定的镜像源来解决问题。以下是具体的解决方法： 更换为阿里云源如果当前的 yum 配置文件存在问题或网络不稳定，可以尝试将其替换为阿里云的镜像源。备份原始配…...

编程日记 2025/8/19 9:03:29

信息学奥赛一本通 1861：【10NOIP提高组】关押罪犯 | 洛谷 P1525 [NOIP 2010 提高组] 关押罪犯

【题目链接】 ybt 1861：【10NOIP提高组】关押罪犯洛谷 P1525 [NOIP 2010 提高组] 关押罪犯【题目考点】 1. 图论：二分图 2. 二分答案 3. 种类并查集【解题思路】解法1：种类并查集一个囚犯是一个顶点，一个囚犯对可以看…...

编程日记 2025/8/18 0:15:12

代码随想录算法训练营第十一天

LeetCode/卡码网题目: 144. 二叉树的前序遍历94. 二叉树的中序遍历145. 二叉树的后序遍历102. 二叉树的层序遍历107.二叉树的层次遍历II199. 二叉树的右视图637. 二叉树的层平均值429. N 叉树的层序遍历515. 在每个树行中找最大值116. 填充每个节点的下一个右侧节点指针117. 填…...

编程日记 2025/8/17 22:12:00

浅谈进程的就绪状态与挂起状态

就绪状态进程获得除 CPU 之外的所需资源，一旦得到 CPU 就可以立即运行，不能运行的原因是还是因为 CPU 的资源太少，只能等待分配 CPU 资源。在系统中，处于就绪状态的进程可能有多个，通常是将它们组成一个进程就绪队列…...

编程日记 2025/8/20 2:08:55

37、web前端开发之Vue3保姆教程(一)

一、课程简介本课程旨在帮助学员从零基础逐步掌握Web前端开发的核心技术，涵盖当前前端开发中的关键工具和框架。课程内容包括： Vue 3：主流前端框架，支持组件化开发和响应式数据管理，帮助学员高效构建现代Web应用。TypeScript：增强版JavaScript，提供静态类型支持，提高…...

编程日记 2025/8/21 2:41:36

cenos7升级gcc 9.3和Qt5.15版本教程

cenos7升级gcc 9.3和Qt5.15版本教程文章目录 cenos7升级gcc 9.3和Qt5.15版本教程0、背景1、现状2、目标和思路3、升级前环境准备3.1 虚拟机联网配置3.2 镜像设置 4、升级gcc 9.35 升级Qt6 测试验证7 总结 0、背景之前编码的环境一直是“拿来主义”，拷贝现成的虚拟…...

编程日记 2025/8/17 22:15:57

Scala总结(七)

集合（二） 数组不可变数组与可变数组的转换 arr1.toBuffer //不可变数组转可变数组 arr2.toArray //可变数组转不可变数组 arr2.toArray 返回结果才是一个不可变数组，arr2 本身没有变化arr1.toBuffer 返回结果才是一个可变数组&#xff…...

编程日记 2025/8/21 2:41:21

linux 使用 usermod 授权普通用户属组权限

之前写过这篇文章 linux 普通用户使用 docker 只不过是使用 root 用户编辑 /etc/group用户所属组文件的方式今天带来一种 usermod 命令行方式以下3步，在root用户下操作第一步，先创建一个普通用户测试使用 useradd miniuser第二步，授权到…...

编程日记 2025/8/19 18:48:21

Redis持久化

Redis持久化一.认识持久化1.简单介绍2.持久化策略二.RDB1.快照2."定期"fork 3.RDB演示(1)手动执行save&bgsave触发一次生成快照(2)插入key，不手动执行bgsave(3)执行bgsave后，新旧文件的替换(4)通过配置自动生成rdb快照(5)rdb文件内容被故…...

编程日记 2025/8/17 22:12:01

什么是 k8s 的 Taints（污点）和 Tolerations（容忍度）

什么是 k8s 的 Taints（污点） 和 Tolerations（容忍度） 在 Kubernetes（K8s）中，Taints（污点）和 Tolerations（容忍度）用于影响 Pod 调度到节点的行为…...

编程日记 2025/8/21 4:01:32

是德科技KEYSIGHT校准件85039B

是德科技KEYSIGHT校准件85039B 是德科技KEYSIGHT校准件85039B 85039B Agilent | 85039B|校准件|网络分析仪校准件|3GHz|75欧|N型品牌： 安捷伦 | Agilent | 惠普 | HP 主要技术指标 DC to 3GHz frequency range 主要描述常用型号： 一、频谱分析仪或…...

编程日记 2025/8/22 23:02:55

以UE5第三方插件库为基础，编写自己的第三方库插件，并且能够在运行时复制.dll

首先，创建一个空白的C 项目，创建第三方插件库。如下图所示编译自己的.Dll 和.lib 库，打开.sln 如下图 ExampleLibrary.h 的代码如下 #if defined _WIN32 || defined _WIN64 #define EXAMPLELIBRARY_IMPORT __declspec(dllimport) #elif d…...

编程日记 2025/8/19 7:31:50

StarRocks执行原理与SQL性能优化策略探索

https://zhuanlan.zhihu.com/p/15707561363 聚合优化实践 -- 通过count group by 优化 count distinct数据倾斜问题除了前面所说的聚合度会对分组聚合造成比较大的影响外，我们还要考虑一个点，即数据倾斜问题。背景: 如下为最初的用户计算uv的SQL SE…...

编程日记 2025/8/22 20:42:11

Java全栈面试宝典：JMM内存模型与Spring自动装配深度解析

目录一、Java内存模型（JMM）核心原理 🔥 问题8：happens-before原则全景解析 JMM内存架构图 happens-before八大规则线程安全验证案例 🔥 问题9：JMM解决可见性的三大武器可见性保障机制 volatile双…...

编程日记 2025/8/17 22:15:16

拉普拉斯变换

【硬核】工科生都逃不掉的拉氏变换，居然又炫酷又实用|拉普拉斯变换原理、图解与应用，傅里叶变换进阶，控制理论必修课【喵星考拉】...

编程日记 2025/8/21 7:24:47

JavaScript之Json数据格式

介绍 JavaScript Object Notation， js对象标注法，是轻量级的数据交换格式完全独立于编程语言文本字符集必须用UTF-8格式，必须用“”任何支持的数据类型都可以用JSON表示JS内内置JSON解析JSON本质就是字符串 Json对象和JS对象互相转化前端…...

编程日记 2025/8/20 15:54:18

Android WiFi协议之P2P介绍与实践

Android WiFi P2P WiFi P2P (Peer-to-Peer) 是 Android 提供的一种允许设备之间直接通过 WiFi 进行通信的技术，无需接入传统的 WiFi 网络或互联网。这种技术也被称为 WiFi Direct。一、WiFi P2P 基本概念 1. 核心组件 P2P 设备：支持 WiFi P2P 的 And…...

编程日记 2025/8/21 17:16:01

android TabLayout中tabBackground和background的区别

在这段代码中，android:background"color/white" 和 app:tabBackground"android:color/transparent" 是两个不同的属性，它们的作用范围和用途完全不同。以下是它们的区别： 1. android:background 作用： 设置整…...

编程日记 2025/8/21 17:16:35