使用elementUi和xlsx做一个导入excel功能

要使用Element UI和XLSX库来实现一个简单的导入Excel功能，你可以使用Element UI的<el-upload>组件来上传文件，然后使用XLSX来解析Excel文件。以下是一个简单的实现示例：

1. 安装Element UI和XLSX库（如果尚未安装）：

npm install element-ui
npm install xlsx

2. 在你的Vue组件中引入Element UI和XLSX：

import Vue from 'vue'
import { Upload } from 'element-ui'
import XLSX from 'xlsx'
 
Vue.use(Upload)

3. 添加上传组件和方法来处理文件：

<template>
  <el-upload
    action="#"
    :on-change="handleFileChange"
    :before-upload="beforeUpload"
  >
    <el-button size="small" type="primary">点击上传Excel</el-button>
  </el-upload>
</template>
 
<script>
export default {
  methods: {
    beforeUpload(file) {
      const isExcel = /\.(xlsx|xls|csv)$/.test(file.name);
      if (!isExcel) {
        this.$message.error('只能上传.xlsx、.xls、.csv 文件!');
        return false;
      }
      return true;
    },
    handleFileChange(file, fileList) {
      const reader = new FileReader();
      reader.onload = (e) => {
        const data = new Uint8Array(e.target.result);
        const workbook = XLSX.read(data, { type: 'array' });
        const firstSheetName = workbook.SheetNames[0];
        const worksheet = workbook.Sheets[firstSheetName];
        const json = XLSX.utils.sheet_to_json(worksheet);
        console.log(json);
        // 处理json数据
      };
      reader.readAsArrayBuffer(file.raw);
    }
  }
}
</script>

在这个示例中，我们使用了el-upload组件来上传文件，并通过before-upload钩子检查文件类型是否为Excel。在文件改变时，我们通过handleFileChange方法读取文件内容，并使用XLSX解析Excel文件为JSON。然后你可以根据需要进一步处理这些数据。