vue+iview导入Excel数据，下载Excel模板，一

最新推荐文章于 2024-07-02 17:05:26 发布

hong.tsou

最新推荐文章于 2024-07-02 17:05:26 发布

阅读量868

点赞数

分类专栏： c# 文章标签： vue

本文链接：https://blog.csdn.net/m0_37968276/article/details/117323577

版权

本文介绍如何使用Vue和IView组件库实现Excel数据的导入、下载模板及将数据提交到数据库。首先展示功能效果，然后详细讲解前端Vue代码实现，包括页面结构和JavaScript逻辑。注意，多语言支持使用了i18n转换。由于内容限制，后台处理代码将在后续章节说明。

摘要由CSDN通过智能技术生成

vue+iview实现导入Excel数据，下载Excel模板，提交数据到数据库

首先什么乱七八糟的，牛不牛b的代码，都不是重点，重点要先看效果图，符合观众的需求，才是最佳首选。
在这里插入图片描述
其次，如果符合观众的需求，就可以继续往下看。
在做这部分，有同事跟我说，我要先实现模板下载，no，no，no，上传部分要先做，就能确定模板内容，最后下载就是一个点击事件，so easy，才不会因上传部分一直修改，下载模板就要一直变动。

ok，步入正题。
1.前端vue + iview 代码
页面部分

<template>
  <Row class="pr-4" style="min-height:500px;">
    
    
    <Divider />
    <Form ref="CustReport" :model="CustReport" :rules="CategorySettingRule" :label-width="160">
      <Row type="" justify="end">
        <Upload action="" ref="userfile" :before-upload="handleUpload" :show-upload-list="false">
          <!--<Button type="primary" icon="ios-cloud-upload-outline">批量新增资料夹</Button>-->
          <Button type="primary" icon="ios-cloud-upload-outline"> {
  {$t('Add More Parameter Settings')/*批量新增参数设定*/}}</Button>
        </Upload>
      </Row>

      <div>
        <Table border :loading="TableLoading" :columns="TableColumn" :data="InputTableData" stripe size="small" ref="Table" id="alarmtb_3_1_1">
        </Table>
        <Row type="flex" justify="right">
          <Button type="success" icon="ios-download-outline"