下载插件

npm install -S xlsx

import * as XLSX from "xlsx"; // Vue3 版本

<el-upload class="upload-demo"accept=".xlsx":http-request="channel":show-file-list="false":limit="1"><el-button type="primary">导入表格</el-button></el-upload>

上传的表格文件格式 

 

// 导入表格
async function channel(uploadFile: any) {// console.log(uploadFile)let file = uploadFile.filelet dataBinary = await readFile(file);let workBook = XLSX.read(dataBinary, { type: "binary", cellDates: true })let workSheet = workBook.Sheets[workBook.SheetNames[0]]const excelData = XLSX.utils.sheet_to_json(workSheet, { header: 1 })// console.log(excelData)Form.value.details = []// 处理数据核心，根据自己的数据格式进行修改excelData.forEach((item: any, index: number) => {if(index!=0&&index!=1&&index!=excelData.length-1){Form.value.details.push({summary: item[0],employee_no: item[1],amount: item[2],account_name: item[3],account_number: item[4],bank_name: item[5],notes: item[6],})}})Form.value.plan_name = excelData[0][0]Form.value.total_amount = excelData[excelData.length - 1][1]// console.log(Form.value.details)Dialog.value = true
}
const readFile = (file) => {return new Promise((resolve) => {let reader = new FileReader()reader.readAsBinaryString(file)reader.onload = (ev) => {resolve(ev.target?.result)}})
}

导入的表格数据 

 简析出来的数据

渲染到页面

导入数据进行渲染的核心是处理得到的数据改为渲染的数组对象格式 

以下是处理其他数据的参考

 找到数据规律进行处理

  let indexX = 1paymentForm.value.details.map((item1: any, i1: number) => {return item1.child.map((item2: any, i2: number) => {indexX++let indexY = 2return item2.detail.map((item3: any, i3: number) => {return item3.data.map((item4: any, i4: number) => {indexY++item4.amonut = excelData[indexY][indexX]return item4})})})})

vue3 导出表格，合并单元格，设置单元格宽度，文字居中，修改文字颜色-CSDN博客