vue3+ts+element-plus 导入导出excel 前端

说话很温柔

已于 2023-03-28 16:42:19 修改

阅读量1k

点赞数 1

文章标签： excel 前端 vue

于 2023-03-27 15:28:28 首次发布

本文链接：https://blog.csdn.net/weixin_68451163/article/details/129795792

版权

本文介绍了如何在Vue3项目中结合TypeScript和Element-Plus库，实现Excel文件的导入与导出功能。重点讨论了导出时所需的表头字段配置，以及导入时利用on-change事件进行数据处理的方法。

摘要由CSDN通过智能技术生成

npm run install xlsx //安装
import * as XLSX from "xlsx"; //引入

首先我们看导出表头需要的字段都要写

//点击事件	
<el-dropdown-item @click="exportModelSpice ">导出型号</el-dropdown-item>
const userData = ref<any>([]);//这是绑定表格的
const exportData = ref<any>([])
const exportModelSpice = () => {

	//导出数据结构构造
  
	userData.value.forEach((item:any) => {
		exportData.value.push({
           //这是你表头里面所有需要的字段  我的字段比较多
			modelNumber: item.modelNumber ? item.modelNumber : '',
			setType: item.setType ? item.setType : '',
			description: item.description ? item.description : '',
			productionPlaceCode: item.productionPlaceCode ? item.productionPlaceCode:'',
			productLife: item.productLife ? item.productLife : '',
			productLifeUnit: item.productLifeUnit ? item.productLifeUnit : '',
			storageConditions: ite