vue3 种使用element plus 导入excel文件

你可以使用Element Plus的Upload组件来实现导入Excel文件的功能。下面是一个使用Vue 3和Element Plus导入Excel文件的示例：

首先，确保你已经安装了Vue 3和Element Plus。可以通过以下命令来安装它们：

npm install vue@next element-plus

接下来，在你的Vue组件中引入所需的模块：

import { defineComponent, ref } from 'vue'
import { ElUpload, ElButton } from 'element-plus'

然后，在模板中使用Upload组件和Button组件：

<template>
  <div>
    <el-upload
      ref="upload"
      :auto-upload="false"
      :on-change="handleFileChange"
      :before-upload="beforeUpload"
    >
      <el-button slot="trigger" size="small" type="primary">选择文件</el-button>
      <el-button style="margin-left: 10px;" size="small" type="success" @click="upload">上传</el-button>
    </el-upload>
  </div>
</template>

在script部分，定义一个ref用于获取上传文件的实例，并编写相应的事件处理函数：

export default defineComponent({
  setup() {
    const uploadRef = ref(null)

    const handleFileChange = (file) => {
      // 处理文件变化事件
      console.log(file)
    }

    const beforeUpload = (file) => {
      // 验证文件格式等
      console.log(file)
      return true
    }

    const upload = () => {
      // 执行上传操作
      uploadRef.value.submit()
    }

    return {
      uploadRef,
      handleFileChange,
      beforeUpload,
      upload
    }
  }
})

这样，你就可以使用Element Plus的Upload组件来导入Excel文件了。当用户选择文件后，`handleFileChange`函数会被触发，你可以在这里处理文件数据。在点击上传按钮时，通过调用`uploadRef.value.submit()`方法来执行上传操作。

请注意，你可能需要根据自己的需求进行一些额外的配置和处理。这只是一个简单的示例，你可以根据实际情况进行修改和扩展。