下載插件
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博客
