最近由于公司的业务前端涉及到了vue框架,所以开始接触vue,自己也在学习当中,下面分享一下最近涉及的导出数据到excel表的业务

一,vue之导出数据excel

vue之导出数据excel

exportPayInfo 是我在组件(components/consume/consume.vue)内定义好的buttton 导入事件函数,有筛选条件的话就先执行查找,然后导出,没有条件参数的话就默认导出所有信息(exportPayInfo 是定义在vue的methods{}方法内的,由于位置原因,整体代码没有截得太全面)

二,主页面(view/consume/consume.vue)调用组件内的函数

vue之导出数据excelvue之导出数据excel

exportBtn 就是组件页面的exportPayInfo函数传过来的内容,这个就是用的vue的属性定义实现的,同时还要导入几个引用下图示意

vue之导出数据excel

三.store目录下(stroe/module/pay.js)再调用父页面的方法,

vue之导出数据excelvue之导出数据excel

stroe/module/pay.js中的actions方法中的exportPayInfo函数就是父页面mapActions([])中对应的,为什么这么用就要仔细研究vue文档了

四,最后在api.js文件中调用后台对应的接口

vue之导出数据excel

还有要在项目中引入2个依赖文件Blob.js和Export2Excel.js文件,自己在项目下创建个目录把文件放进去,这两个文件网上很容易搜到

最后运行功能

vue之导出数据excel

vue之导出数据excel

由于也是刚接触vue,所以很多地方也不是太明白 ,在加上每个项目都是不一样的,所以也没法描述的太清楚,就是大体的思路,希望看的朋友能指点,也希望能给大家带来一点帮助

 

相关文章:

  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-06-26
  • 2019-09-07
  • 2021-06-25
猜你喜欢
  • 2022-12-23
  • 2022-12-23
  • 2021-08-28
  • 2022-12-23
  • 2021-06-13
  • 2021-10-07
  • 2021-09-27
相关资源
相似解决方案