在本教程中，我们将学习如何将 Element UI 的表格组件（el-table）导出到 Excel 文件中。Element UI 是一个基于 Vue.js 的 UI 框架，提供了丰富的组件，如 el-table，可以让我们轻松构建可视化数据表格。本教程将向您展示一种用 JavaScript 制作 Excel 表格的方法，并使用 sheetjs 库来将数据喂给它。
**准备工作**
1. 首先，确保已安装并设置好 Element UI：按照 [Element UI 的官方安装指南](https://element.eleme.io/#/en-US/component/installation)来安装和配置。
2. 还需要安装以下库：
- xlsx：这是一个非常实用的 JavaScript 库，用于处理 Excel 文件。执行以下命令进行安装：
```
npm install xlsx
```
**实现过程**
1. 在 Vue 项目的 `src` 目录中，创建一个名为 `utils` 的文件夹。在此文件夹中，创建一个名为 `export.js` 的文件。这个文件将包含我们将用于导出 el-table 数据的函数。
2. 打开 `export.js`，导入依赖关系，并实现导出表格的功能。添加以下代码：
```javascript
import { saveAs } from 'file-saver';
import XLSX from 'xlsx';
export function exportTableToExcel(elTable, filename) {
// 获取表格数据
const tableData = elTable.data;
// 获取表头数据
const columns = elTable.columns.map(column => column.label);
// 将数据转换为 worksheet
const wsData = [columns, ...tableData];
const worksheet = XLSX.utils.aoa_to_sheet(wsData);
// 将 worksheet 转换为 workbook
const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
// 将 workbook 导出为 Excel 文件
const data = XLSX.write(workbook, { type: 'array', bookType: 'xlsx' });
const blob = new Blob([data], { type: 'application/octet-stream' });
saveAs(blob, `${filename || 'data'}.xlsx`);
}
```
以上，我们已经实现了一个名为 `exportTableToExcel` 的导出表格的函数。接下来，让我们看看如何在组件中使用它。
3. 在需要导出表格的组件中，导入实现的 `exportTableToExcel` 函数，并为 el-table 添加一个按钮，用于触发导出操作。例如：
```html
```
在以上示例中，我们首先通过 `ref` 得到 el-table 组件的引用，然后为按钮添加了一个 `click` 事件监听器，调用 `exportToExcel` 方法。在这个方法中，我们使用刚刚创建的 `exportTableToExcel` 函数，传入 el-table 引用和文件名。
完成以上步骤，您现在应该可以正常导出表格数据为 Excel 文件了。在浏览器中打开你的应用，点击导出按钮，应该会看到一个带有 el-table 数据的 Excel 文件被生成并下载到本地。
