今天的需求是在Table表格增加行编辑及文件上传展示下载功能。

所用到的antd vue组件是<a-upload>文件上传：

<a-list>上传文件列表加抽屉展示ui组件

 在网上找了很多方法，找不到我自己满意的效果，琢么了半天研究出来了。

上家伙：

这里展示感觉官方的代码太复杂了，做了些修改。

//:data-source="fileListinof"是绑定要展示的文件列表数组，官方封装好了循环直接替换点数据

<a-list class="demo-loadmore-list" :loading="loading" item-layout="horizontal" :data-source="fileListinof">
   <a-list-item slot="renderItem" slot-scope="item, index">//item,和index直接用v-for一样的
      <a slot="actions" @click="downloadFile(item)">下载</a>//展示后的下载事件
      <a slot="actions" @click="removeFile(item)">删除</a>//展示后的删除事件
      </a-list-item-meta>//分割线
      <div>{{item.attName}}</div>//内容--文件名
   </a-list-item>
</a-list>

下面这个是官方的：

<a-list
    class="demo-loadmore-list"
    :loading="loading"
    item-layout="horizontal"
    :data-source="data"
  >
    <div
      v-if="showLoadingMore"
      slot="loadMore"
      :style="{ textAlign: 'center', marginTop: '12px', height: '32px', lineHeight: '32px' }"
    >
      <a-spin v-if="loadingMore" />
      <a-button v-else @click="onLoadMore">
        loading more
      </a-button>
    </div>
    <a-list-item slot="renderItem" slot-scope="item, index">
      <a slot="actions">edit</a>
      <a slot="actions">more</a>
      <a-list-item-meta
        description="Ant Design, a design language for background applications, is refined by Ant UED Team"
      >
        <a slot="title" href="https://www.antdv.com/">{{ item.name.last }}</a>
        <a-avatar
          slot="avatar"
          src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
        />
      </a-list-item-meta>
      <div>content</div>
    </a-list-item>
  </a-list>

看着类，还是该删删。

文件上传：

<a-upload
 name="file"//发到后台的文件参数名
 :multiple="true"//是否支持多选文件
 :customRequest="customRequest"覆盖默认的上传行为，修改为自己的上传需求
 :headers="headers"
 @change="handleChange"//事件，关键还是这个
 :showUploadList=false//不显示官方的默认展示样式，自己做展示下载删除
 >
   <a-button> <a-icon type="upload" /> 添加附件 </a-button>
</a-upload>

methods：

import { uploadAction,getFileAccessHttpUrl } from '@/api/manage'
import { FFormMixin } from "@/mixins/FFormMixin";

mixins:[ FFormMixin ],//方法

handleChange(info) {
  this.saveFile(info,1)//这里进来直接调自己的方法“1”是为了辨别是上传和删除
  <--if (info.file.status !== 'uploading') {
  }
  if (info.file.status === 'done') {
    this.$message.success(`${info.file.name} file uploaded successfully`)
  } else if (info.file.status === 'error') {
    this.$message.error(`${info.file.name} file upload failed.`)
  }-->
},
 customRequest(data) {
   //给个这个方法什么都不用，当然也可以优化掉   
},
saveFile(data,arr) {
   let httpurl =  this.url.edit//上传文件的地址
   this.confirmLoading = true//loding
   let formDataWithFile = new FormData()//声明一个form表单
   if(arr==1){//这个是上传过来的判断
     //将handleChange拿过来的参数放进表单里，注意：要传file.originFileObj里面的参数
      formDataWithFile.append('fileList', data.file.originFileObj)
   }else if(arr==2){//这个是删除过来的判断，就直接用官方的了
      //annexRemoveList是上面过来的不用在这个而文件data声明
      formDataWithFile.append('removeFileList', JSON.stringify(this.annexRemoveList))
   }
   //这个是所上传文件绑定的id等一些基本信息，无论删除还是上传都需要
   formDataWithFile.append('file', JSON.stringify(this.uesrinformation))
   uploadAction(httpurl, formDataWithFile) 
   .then((res) => {
   if (res.success) {
      this.$message.success(res.message)//成功提示
      //成功后调用父组件列表刷新,后面直接在list更新文件展示数据，因为用的组件多用了很多$parent
      this.$parent.$parent.$parent.$parent.$parent.$parent.$parent.$parent.loadDataS();
   }else {
      data.onError()//错误提示
   }
   })
   .finally(() => {
      this.confirmLoading = false//loding关闭
   })
},
downloadFile(data){//下载方法
   //getFileAccessHttpUrl是一个官方的拼接方法后面传入文件路径就ok,自动拼接
   //拼接后直接跳转网址，浏览器会自己处理，开始下载
   location.href=getFileAccessHttpUrl(data.attPath)
},
removeFile(data){
   //带上文件所在的id，还有路径
   this.annexRemoveList=[{id: data.id, attPath: data.attPath}]
   this.saveFile(data,2)//引用方法
},
getInfoList(record){
//这个是父组件无论删除还是上传，列表刷新后this.$refs过来的方法用于更新列表展示 
//当然也可以直接在本组件内声明请求
   //因为是个复杂数据类型所以用到循环，根据需求自己变通，把值赋给fileListinof
   for(let i =0 ;i<record.length ;i++){
     if(record[i].id==this.id ){ 
         let arrList =record[i]
         this.fileListinof= arrList.taskFile
     }
   }
},

完美！

如有不对或瑕疵大佬请及时指出修改。