一键搞定Element Plus表格导入导出Excel，快来围观~

2023-07-29 16:57:09

Element Plus 表格：轻松导入和导出 Excel 文件

简介

处理数据时，导入和导出功能至关重要。Element Plus 表格提供了一种简单且强大的方式来与 Excel 文件进行交互，从而提升您的工作效率。在这篇教程中，我们将深入探讨如何使用 Element Plus 表格实现无缝的数据导入和导出。

安装和设置

第一步是安装 Element Plus 并将其集成到您的项目中。在您的项目中运行以下命令：

npm install element-plus

然后在 main.js 中引入组件：

import { ElTable, ElButton } from 'element-plus'

const app = createApp(App)

app.component('el-table', ElTable)
app.component('el-button', ElButton)

app.mount('#app')

创建表格

接下来，在您的页面中创建 Element Plus 表格组件。这是一个简单表格的示例：

<el-table :data="tableData">
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
  <el-table-column prop="address" label="地址"></el-table-column>
</el-table>

其中，tableData 是一个数组，包含表格中的数据。

导入数据

要导入数据，我们需要添加一个按钮，当单击时，它将打开文件选择器，让我们选择 Excel 文件。导入按钮的代码如下：

<el-button @click="handleImport">导入</el-button>

接下来，编写 handleImport 函数，将 Excel 文件转换为 JSON 格式，然后将其导入表格中。

handleImport() {
  const input = document.createElement('input')
  input.type = 'file'
  input.accept = '.xlsx, .xls'
  input.onchange = () => {
    const file = input.files[0]
    const reader = new FileReader()
    reader.onload = () => {
      const data = reader.result
      const workbook = XLSX.read(data, { type: 'binary' })
      const sheetName = workbook.SheetNames[0]
      const worksheet = workbook.Sheets[sheetName]
      const json = XLSX.utils.sheet_to_json(worksheet)
      this.tableData = json
    }
    reader.readAsBinaryString(file)
  }
  input.click()
}

导出数据

要导出数据，我们需要一个按钮，当单击时，它会将表格中的数据导出到 Excel 文件中。导出按钮的代码如下：

<el-button @click="handleExport">导出</el-button>

接下来，编写 handleExport 函数，将表格中的数据转换为 JSON 格式，然后将其导出到 Excel 文件中。

handleExport() {
  const data = this.tableData
  const worksheet = XLSX.utils.json_to_sheet(data)
  const workbook = XLSX.utils.book_new()
  XLSX.utils.book_append_sheet(workbook, worksheet, 'sheet1')
  XLSX.writeFile(workbook, 'data.xlsx')
}