Vue3实现动态导入Excel表格数据 _生活百科

1. 前言在开发工作过程中，我们会遇到各种各样的表格数据导入，大部分我们的解决方案：提供一个模板前端进行下载，然后按照这个模板要求进行数据填充，最后上传导入，这是其中一种解决方案。个人认为还有另外一种解决方案，不一定会前面的方案好，方便，但是可以减少人为操作，减少出错，更为通用，就是进行动态数据导入，前端进行自定义导入数据，配置数据对应关系，最后提交导入结果。
2. 如何实现2.1使用技术【Vue3实现动态导入Excel表格数据】后台使用.Net6.0,前端使用Vue3
2.2实现思路

前端通过Excel表格数据导入，导入后客户可以进行数据编辑（未实现）客户数据确认后进行数据回写主页面
设置数据对应关系，也就是后台所需数据格式和前台数据格式进行绑定
数据校验，进行数据提交

2.3具体实现方案2.3.1导入Excel数据创建列表页面，页面主要布局如下

文章插图
Table需要绑定的列是未知的,所以el-table绑定的el-table-column是需要动态进行加载，动态定义表格以及变量
<el-table :data="https://www.huyubaike.com/biancheng/state.tableData.data"><el-table-columnv-for="item in state.colunm":prop="item.key":key="item.key":label="item.lable"></el-table-column></el-table>const state = reactive({colunm: [{key: "", lable: ""}],});点击导入报名数据，弹出上传数据页面

文章插图
这一块的功能在之前的一篇文章有写过：https://www.cnblogs.com/wuyongfu/p/16651107.html子组件的核心代码页面布局：<template><el-dialog :close-on-click-modal="false" v-model="state.dialogVisible" :title="title" width="70%" ><el-uploadclass="upload-demo":auto-upload="false":on-change="uploadChange"style="text-align: left;"><el-button type="primary">上传文件</el-button></el-upload><el-form-item><el-button @click='submit'>确认导入</el-button></el-form-item><el-table :data="https://www.huyubaike.com/biancheng/state.tableData.data" max-height="500px"><el-table-column v-for="item in state.colunm" :prop="item.key" :key="item.key" :label="item.lable"></el-table-column></el-table><div class='block flex justify-end' v-if='state.tableData.total > 0'><el-pagination v-model:currentPage="state.searchInput.PageIndex" v-model:page-size="state.searchInput.PageSize":page-sizes="[10, 50, 200, 1000]" layout="total, sizes, prev, pager, next, jumper" @size-change="getData"@current-change="getData" :total="state.tableData.total" /></div></el-dialog></template>变量定义：const state = reactive({tempTableData: [{}],//临时存储全部数据searchInput: { PageIndex: 1, PageSize: 10 },tableData: { data: [{}], total: 0 },//表格加载当前页面数据dialogVisible: false,colunm: [{ key: '', lable: '' }]});父页面调用方法,进行表格列头加载，初始化表格数据：const childMethod = (data) => {state.colunm = data;state.tableData.data = https://www.huyubaike.com/biancheng/[];state.dialogVisible = true;}绑定表格方法,前端进行分页数据处理:(这里可能会有性能问题，暂时没有仔细探究)const getData = () => {const tempData: any = [];state.tempTableData.forEach((value, index) => {if (index >= ((state.searchInput.PageIndex - 1) * state.searchInput.PageSize) && index < ((state.searchInput.PageIndex) * state.searchInput.PageSize)) {tempData.push(value);}});state.tableData.data = tempData;state.tableData.total = state.tempTableData.length;}提交数据回写父组件方法const submit = () => {console.log(state.tempTableData);context.emit('childClick', state.tempTableData,state.colunm)}上传Excel读取数据方法，主要动态绑定列以及导入的数据const uploadChange = async (file) => {let dataBinary = await readFile(file.raw)let workBook = XLSX.read(dataBinary, { type: 'binary', cellDates: true })let workSheet = workBook.Sheets[workBook.SheetNames[0]]let data: any = XLSX.utils.sheet_to_json(workSheet)let mycolunm={};Object.setPrototypeOf(mycolunm,data[0]);state.colunm=[];for(let key in mycolunm){state.colunm.push( { lable: key, key: key })}let tHeader = state.colunm.map(obj => obj.lable)let filterVal = state.colunm.map(obj => obj.key)tHeader.map(val => filterVal.map(obj => val[obj]))const tempData: any = [];data.forEach((value) => {const ob = {};tHeader.forEach((item, index) => {ob[filterVal[index]] = value[item].toString();})tempData.push(ob);})state.tempTableData = https://www.huyubaike.com/biancheng/tempData;getData();}