vue3表格导入导出.xlsx

在这次使用时恰好整出来了，希望大家也能学习到，特此分享出来

使用前确保安装以下模块，最好全局配置element-plus

### 展示一下

###

###导出选项

###

###导入de数据

###

安装的模块

npm install js-table2excel // 安装js-table2excel
npm install xlsx // 安装xlsx
npm install dayjs // 安装dayjs
npm install axios // 安装axios

element-plus全局配置地址：快速开始 | Element Plus

依次根据官网步骤进行引入即可，不在过多介绍

接口文件配置，例如utlis/api.js

// api.js
import axios from 'axios'

const api = axios.create({
  baseURL: 'http://localhost:3000', // 后端接口地址
  timeout: 5000,
})

export default api;

vue页面的构局/前端

样式部分

功能部分

样式自己搭建即可，不再演示辣

vue后端接口的布局

之前已经讲解过数据库的搭建，mongoose搭建步骤 <-----查看创建步骤

也可根据mongoose官网：Mongoose.js中文网

以下是各接口的简单搭建

后端展示数据接口

// 数据全部展示
router.get("/case/show",async function(req,res){
  let data=await caseprogressModel.find()
  
  res.send({code:200,message:'caseshow ok',data})
})

后端批量添加接口

// 批量添加接口
router.post('/madd',async function(req, res, next) {
  const body= req.body
  console.log(body);
  const insertedData = await caseprogressModel.insertMany(body)
  res.send({code:"200",message:'madd ok',data: insertedData})
});

最终效果展示：

vue导入导出