在前端開發中，數據比對是一個常見需求，尤其在資產管理等場景中。本文將基于 Vue.js 和 Element UI，通過一個簡化的代碼示例，展示如何實現“新建比對”和“開始比對”功能的核心部分。

一、功能簡介

我們將聚焦兩個核心功能：

1. 新建比對：打開上傳對話框，允許用戶選擇文件。
2. 開始比對：上傳文件并調用后端接口進行數據比對，同時展示進度。

以下是逐步拆分的實現細節。

---

二、核心代碼實現

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 美化上傳區域，標題前添加藍色標識線。

---

四、總結

通過以上代碼，我們實現了“新建比對”和“開始比對”的核心功能：

• 點擊“新建比對”打開上傳對話框，支持文件校驗。
• 點擊“開始比對”上傳文件并調用后端接口，完成數據比對。