vue + element-ui实现简洁的导入导出功能

实现简洁的导入导出功能可以使用 element-ui 提供的 el-upload 组件和 js-xlsx 库来实现。下面是一个示例代码：

1. 导入 js-xlsx 库

import XLSX from 'xlsx'

2. 模板文件下载

<el-button type="primary" icon="el-icon-download" @click="downloadTemplate">下载模板</el-button>

// 下载模板
downloadTemplate() {
  const template = [
    ['姓名', '性别', '年龄'],
    ['张三', '男', '23'],
    ['李四', '女', '25']
  ]
  const ws = XLSX.utils.aoa_to_sheet(template)
  const wb = XLSX.utils.book_new()
  XLSX.utils.book_append_sheet(wb, ws, 'Sheet1')
  XLSX.writeFile(wb, '导入模板.xlsx')
}

3. 导入文件上传

<el-upload class="upload-demo" action="" :on-change="handleUpload">
  <el-button slot="trigger" type="primary">上传文件</el-button>
  <div slot="tip" class="el-upload__tip">支持xlsx、xls格式</div>
</el-upload>

// 处理上传文件
handleUpload(file) {
  const reader = new FileReader()
  reader.onload = (e) => {
    const data = e.target.result
    const workbook = XLSX.read(data, { type: 'binary' })
    const sheetName = workbook.SheetNames[0]
    const sheet = workbook.Sheets[sheetName]
    const json = XLSX.utils.sheet_to_json(sheet)
    console.log(json)
    // TODO: 处理上传数据
  }
  reader.readAsBinaryString(file.raw)
}

4. 导出文件功能

// 导出文件
exportExcel(data, fileName) {
  const ws = XLSX.utils.json_to_sheet(data)
  const wb = XLSX.utils.book_new()
  XLSX.utils.book_append_sheet(wb, ws, 'Sheet1')
  XLSX.writeFile(wb, fileName + '.xlsx')
}

以上就是一个简单的 vue + element-ui 实现导入导出功能的示例代码。