vue+element 上传excel文件以及模板下载

工作的要求就是 提供模板 然后下载模板 里面录入的数据 可以上传excel文件来 渲染列表

## 首先是下载模板

 <el-button icon="el-icon-download" style="float:right;" @click="downloadTemplate">
   模板下载
   </el-button >
   通过a链接  （可以把需要的模板放到静态文件里 然后通过href引入）
    <a ref="downloadTemplate" style="display: none" href="../../../../../static/excel/vmgroup.xlsx"/>
    在methods中写下载的模板 通过dispatchEvent('click')
     downloadTemplate() {
      this.$refs.downloadTemplate.dispatchEvent(new MouseEvent('click'))
    }

模板下载完成后 我们来看上传excel文件

这里是用element 框架来实现的

这是我的页面 点击新增出现这个模板
 <el-form-item label="文件" prop="fileName">
            <el-input
              v-model="ruleForm.fileName"
              style="width: 220px"
              readonly="readonly"
            /> 这里是input框 是放上传文件的名字的
            <el-upload
              ref="upload"
              :file-list="fileList"
              :on-change="onChange"
              :before-upload="beforeUpload"
              :auto-upload="false"
              style="float: right"
              class="upload-demo"
              action=""
            >
              <el-button slot="trigger" type="primary" plain>导入</el-button> 点击导入进行选择文件
            </el-upload>
          </el-form-item>

我们这里判断一下他的 格式是不是excel文件

点击确认 确认上传