vue中 element-ui中 submit表单action下载(示例)

最新推荐文章于 2025-05-26 00:00:34 发布

若茶先森

最新推荐文章于 2025-05-26 00:00:34 发布

阅读量8.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： excel示例文章标签： vue中subumit 中action导出示例

本文链接：https://blog.youkuaiyun.com/zpcqdkf/article/details/80596276

excel示例专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何在Vue项目中使用Element-UI实现Excel文件的导出功能，并提供了一个改进的方法来替代原有的表单提交方式，使得导出操作更加符合现代前端开发的最佳实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

  <
  form 
  name=
  "orderform" 
  style=
  "display:inline-block;" 
  action=
  "http://dev.womaoapp.com/fwas-wishingLamp-admin/sys/wishingOrderRest/orderExportExcel" 
  method=
  "post"
  >
 
 
  <
  input 
  v-show="
  false" 
  style=
  "visiable:hidden;" 
  type=
  "text" 
  name=
  "wishingLampId" 
  v-model="
  form.
  wishingLampId"
  >
 
 
  <
  input 
  v-show="
  false" 
  style=
  "visiable:hidden;" 
  type=
  "text" 
  name=
  "orderNo" 
  v-model="
  form.
  orderNo"
  >
 
 
  <
  input 
  v-show="
  false" 
  style=
  "visiable:hidden;" 
  type=
  "text" 
  name=
  "channelId" 
  v-model="
  form.
  channelId"
  >
 
 
  <
  input 
  v-show="
  false" 
  style=
  "visiable:hidden;" 
  type=
  "text" 
  name=
  "startTime" 
  v-model="
  form.
  startTime"
  >
 
 
  <
  input 
  v-show="
  false" 
  style=
  "visiable:hidden;" 
  type=
  "text" 
  name=
  "endTime" 
  v-model="
  form.
  endTime"
  >
 
 
  <!-- <input style="height:40px;background:#C8C9CC;border-radius:3px;" @click="daochu" type="button" value="批量导出" /> -->
 
 
  <
  el-button 
  display=
  "inline-block" 
  class=
  "filter-item" 
  type=
  "primary" 
  :loading="
  downloadLoading" 
  icon=
  "el-icon-download" 
  @click="
  handleDownload"
  >导出
  </
  el-button
  >
 
 
  </
  form
  >
 

  下边是method中的方法
 

 
  handleDownload () {
 
  document.
  orderform.
  submit()
 
   },

又综合看了下上边的方法感觉比较low 原生的可能和vue中element-ui中的方法在一块还是有点低端和格格不入，参考一些资料之后，又重新更新了一篇，参考借鉴。element-ui中下载excel文件重新更新方法链接点击打开链接