vue-element-admin项目导入和导出的实现

下面我将详细讲解 "vue-element-admin项目导入和导出的实现" 的完整攻略，包括具体的过程和示例说明。

1. 导出实现

1.1 安装引入文件

首先，在项目中引入 FileSaver.js 和 XLSX.js 两个文件，它们分别用于文件保存和 Excel 文件处理。

在终端中输入以下命令：

npm install file-saver xlsx --save

1.2 新建 exportExcel() 形成数据

在组件中定义一个函数，名为 exportExcel，将需要导出的数据形成为一个数组，传给 XLSX 构造方法生成 Excel 文件。

以下是示例代码：

import XLSX from 'xlsx';
import FileSaver from 'file-saver';
exportExcel() {
  // 表头数据
  const tableHeader = ['姓名', '年龄', '家庭住址'];
  // 表格数据
  const tableData = [
    {
      name: '小明',
      age: 20,
      address: '广州市天河区'
    },
    {
      name: '小红',
      age: 18,
      address: '深圳市福田区'
    },
    {
      name: '小黄',
      age: 22,
      address: '广州市白云区'
    }
  ];
  // 导出数据
  const exportData = [];
  exportData.push(tableHeader);
  tableData.forEach(item => {
    const temp = [item.name, item.age, item.address];
    exportData.push(temp);
  });
  const sheetName = 'Sheet1';
  const workbook = XLSX.utils.book_new();
  const worksheet = XLSX.utils.aoa_to_sheet(exportData);
  XLSX.utils.book_append_sheet(workbook, worksheet, sheetName);
  // 保存为 Excel 文件
  const filename = 'export.xlsx';
  XLSX.writeFile(workbook, filename);
}

1.3 在页面中添加导出按钮并调用 exportExcel()方法

在需要添加导出功能的页面添加一个按钮，并在点击事件中调用 exportExcel() 方法。

以下是示例代码：

<el-button type="success" @click="exportExcel">导出Excel</el-button>

2. 导入实现

2.1 安装引入文件

同样的，我们需要引入 FileSaver.js 和 XLSX.js 两个文件来实现导入功能。

在终端中输入以下命令：

npm install file-saver xlsx --save

2.2 新建 importExcel() 函数

在组件中定义一个函数，名为 importExcel，在该函数中引入 FileSaver 和 XLSX，然后再通过 input[type=file] 标签上传 Excel 文件，并将文件内容解析成数组。

以下是示例代码：

import XLSX from 'xlsx';
import FileSaver from 'file-saver';
importExcel(event) {
  const file = event.target.files[0];
  const reader = new FileReader();
  reader.onload = event => {
    const data = event.target.result;
    const workbook = XLSX.read(data, { type: 'binary' });
    const firstSheetName = workbook.SheetNames[0];
    const worksheet = workbook.Sheets[firstSheetName];
    const json = XLSX.utils.sheet_to_json(worksheet);
    console.log(json);
  }
  reader.readAsBinaryString(file);
}

2.3 在页面中添加上传按钮并调用 importExcel() 函数

在需要添加导入功能的页面添加一个文件上传按钮，并且在 change 事件中调用 importExcel() 函数。

以下是示例代码：

<el-upload
  class="upload-box"
  action="#"
  :show-file-list="false"
  :on-change="importExcel"
>
  <el-button slot="trigger" size="small" type="primary">上传Excel文件</el-button>
  <div slot="tip" class="el-upload__tip">只能上传Excel文件哦</div>
</el-upload>

以上就是 vue-element-admin 项目中导入和导出实现的完整攻略。