vue点击不同的按钮实现文件下载

QQ录屏20220616095854

首次四个按钮是前端写死，在后端传过来的数据中包含的name，通过name携带的id值来区分。

首先name是通过v-for进行遍历出来的，如图所示。在公共数据区中定义tablelist，通过不同的code值来区分不同的name。

 

因为点击不同的按钮是通过code值来区分的，给按钮定义一个样式，当点击不同的按钮就给添加写好的样式，:class="{active:active===item.code}"；当他被点击的时候给一个click方法，@click="handleTabChange(item)"，把code值传入给它。

handleTabChange(e) {
  this.active = e.code;
}

 在页面渲染后，调用getUpload方法，在接口调用中，在接口中传入往后端的传参，

{ pageNum: 1, pageSize: 50 }

当接口调用成功后，定义一个集合obj，然后通过switch函数，当code为‘1’时，即obj【‘1’】赋给接口传过来的即附件的字段refFile。

最后重新定义一个集合enclosure【object】类型的，将obj的值赋给enclosure函数，

在前端组件中调用的是已经写好的公共组件，zd-upload，通过v-moudle定义，因为obj赋给了enclosure，所以点击不同的按钮时，拿到不同的值，来进行绑定。通过v-show来隐藏，接口只需要调用一次就行。