在開發過程中，我們經常需要批量導入 Excel 數據到系統中。而使用 Vue 框架可以使這個過程更加簡便。

首先，我們需要選擇 Excel 文件并讀取數據。這可以通過使用FileReader對象實現：

let reader = new FileReader()
reader.readAsBinaryString(file)
reader.onload = (e) =>{
let data = e.target.result
}

然后，我們需要使用一個庫來解析 Excel 數據。這里我們使用xlsx庫：

import xlsx from 'xlsx'
let workbook = xlsx.read(data, { type: 'binary' })
let sheetName = workbook.SheetNames[0]
let sheet = workbook.Sheets[sheetName]
let excelData = xlsx.utils.sheet_to_json(sheet)

這將把 Excel 數據轉換為 JSON 對象。

接下來，我們需要在組件中創建表格來展示數據。這可以通過使用el-table組件來實現：

<el-table :data="excelData">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年齡"></el-table-column>
...
</el-table>

我們需要根據 Excel 數據的結構，為每個字段創建一個表格列。

然后，我們可以為表格添加操作按鈕來使用戶可以執行更多操作。例如，我們可以添加一個導入按鈕來導入 Excel 數據：

<el-button type="primary" @click="importExcel">導入</el-button>

接著，在組件的方法中，我們編寫導入 Excel 數據的邏輯：

import Excel from 'xlsx'
...
methods: {
importExcel () {
let fileInput = this.$refs.fileInput
let file = fileInput.files[0]
let reader = new FileReader()
reader.readAsBinaryString(file)
reader.onload = (e) =>{
let data = e.target.result
let workbook = Excel.read(data, { type: 'binary' })
let sheetName = workbook.SheetNames[0]
let sheet = workbook.Sheets[sheetName]
this.excelData = Excel.utils.sheet_to_json(sheet)
}
}
}

最后，我們需要添加文件上傳的功能：

<div>
<el-upload
action="#"
ref="uploadExcel"
:show-file-list="false"
:on-change="importExcel">
<el-button slot="trigger">點擊上傳</el-button>
</el-upload>
<input type="file" ref="fileInput" style="display:none">
</div>

使用el-upload組件，我們可以實現文件上傳并調用我們剛才編寫的導入 Excel 數據的方法。

以上就是使用 Vue 批量導入 Excel 的完整過程，希望大家可以從中受益。