element组件导入excel表格

在 Element UI 中，可以使用 `ElUpload` 组件来实现 Excel 文件的上传，并使用 `xlsx` 库将文件读取为 JSON 格式。

以下是一个示例代码：

<template>
  <el-upload
    class="upload-demo"
    :action="uploadUrl"
    :on-success="handleUploadSuccess"
    :show-file-list="false"
    :before-upload="beforeUpload"
  >
    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
  </el-upload>
</template>

<script>
import XLSX from 'xlsx'
import { ElLoading, ElMessage } from 'element-plus'

export default {
  data() {
    return {
      uploadUrl: 'your/upload/url',
      loading: null
    }
  },
  methods: {
    beforeUpload(file) {
      const fileType = file.type
      if (fileType !== 'application/vnd.ms-excel' && fileType !== 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {
        ElMessage.error('只能上传 Excel 文件！')
        return false
      }
    },
    handleUploadSuccess(response) {
      const { status, message, data } = response
      if (status === 'success') {
        const workbook = XLSX.read(data, { type: 'binary' })
        const sheet = workbook.Sheets[workbook.SheetNames[0]]
        const json = XLSX.utils.sheet_to_json(sheet)

        // 将 json 数据提交到后端保存到数据库中
        // ...
      } else {
        ElMessage.error(message)
      }
    }
  }
}
</script>

这段代码会在页面中显示一个“选取文件”按钮，当用户上传 Excel 文件后，会将其读取为 JSON 格式，并提交到后端保存到数据库中。

需要注意的是，如果需要导入大量数据，可能需要考虑分批导入的方案，避免一次性将所有数据读取到内存中造成内存溢出。同时，如果需要对读取的数据进行一些格式化或者清洗操作，可以在 `handleUploadSuccess` 方法中进行。