vue3+elementUiPlus表格导出功能

在Vue 3和Element Plus中，要实现表格导出功能，可以使用第三方库如exceljs和file-saver来创建和保存Excel文件。以下是一个简单的示例：

1. 安装所需库：

npm install exceljs file-saver

2. 在Vue组件中使用：

<template>
  <el-button @click="exportToExcel">导出Excel</el-button>
</template>
 
<script setup>
import { ref } from 'vue';
import { saveAs } from 'file-saver';
import { Workbook } from 'exceljs';
 
const exportToExcel = async () => {
  // 假设你有一个表格数据的数组
  const tableData = ref([
    { name: '张三', email: 'zhangsan@example.com', age: 30 },
    { name: '李四', email: 'lisi@example.com', age: 25 },
    // ...更多数据
  ]);
 
  // 创建工作簿和工作表
  const workbook = new Workbook();
  const worksheet = workbook.addWorksheet('My Sheet');
 
  // 添加表头
  worksheet.addRow(['姓名', '邮箱', '年龄']);
 
  // 添加表格数据
  tableData.value.forEach((row) => {
    worksheet.addRow([row.name, row.email, row.age]);
  });
 
  // 定义导出文件的名称
  const fileName = '表格数据.xlsx';
 
  // 定义写入文件的格式
  await workbook.xlsx.writeBuffer().then((data) => {
    const blob = new Blob([data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8' });
    saveAs(blob, fileName);
  });
};
</script>

这段代码中，我们定义了一个exportToExcel函数，它会创建一个Excel工作簿和工作表，然后添加表头和表格数据。最后，我们使用saveAs函数来保存生成的Excel文件。当用户点击按钮时，exportToExcel函数会被触发。

请确保你的项目中已经安装了Element Plus，并正确地引入了el-button组件。这个示例假设你有一个表格数据的数组，你可以根据你的实际数据结构来修改tableData和添加数据到工作表的逻辑。