最近在写avue表格，找了很久关于在子表单中添加了附件，然后可以在附表中显示上传文件的路径，并且双击可以打开下载，终于搞定了，或不多说上代码：

 <avue-crud
                :table-loading="tableLoading"
                ref="TrainManagerTable"
                v-model="form"
                :data="TrainManagerList"
                :page="page"
                @row-update="rowUpdate"
                @row-save="rowSave"
                @row-del="rowDel"
                @size-change="sizeChange"
                @current-change="currentChange"
                @search-change="searchChange"
                @search-reset="searchReset"
                @selection-change="selectionChange"
                :permission="permissionList"
                :option="option"
				:upload-before="uploadBefore"
				:upload-after="uploadAfter"
				:upload-preview="uploadPreview">
			<template slot-scope="scope" slot="trainFile">
			    <div>
			      <el-link :href="scope.row.trainFile" target="_blank">点击下载</el-link>
			    </div>
			</template>
        </avue-crud>

其中要使用卡槽：

<template slot-scope="scope" slot="trainFile">
			    <div>
			      <el-link :href="scope.row.trainFile" target="_blank">点击下载</el-link>
			    </div>
</template>

下面是配置的Column:

 column: [
        {
                            label: '课件', // 列名称
                            prop: 'trainFile', // 列字段
                            overHidden: true, // 超出隐藏
                            addDisplay: true, // 新增时是否显示
                            editDisplay: true, // 编辑时是否显示
                            search: false, // 搜索
							slot:true,
							type:'upload',
							limit:'1',
							dataType: 'string',//array / json / string
							showFileList:true,
							loadText: '课件上传中，请稍等',
							tip: '上传的文件不超过1M',
						 	propsHttp: {
					 // home:'http://10.10.10.247:9000/lsinnovationtest/ls-innovation/',
								  res: 'data',
								  name:'fileName',
								  url:'fileUrl',
							  },
							action: '/dev-api/Minio/uploadFileUrl',
       },
],

其中dataType: 'string',可以显示上传文件返回的路径，当然要在

propsHttp: {
                                 // home:'http://10.10.10.247:9000/lsinnovationtest/ls-innovation/',
                                  res: 'data',
                                  name:'fileName',
                                  url:'fileUrl',
                              },

进行设置，fileName，fileUrl，这个是后端给你返回的值，截图看一下后端调试返回的值F12：

返回值data 里面包括文件地址和文件名fileName，fileUrl， 

上传的位置就是：action: '/dev-api/Minio/uploadFileUrl',后面的地址就是后端地址，

另外解答一下propsHttp: {
                                 // home:'http://10.10.10.247:9000/lsinnovationtest/ls-innovation/',

                                res: 'data',
                                  name:'fileName',
                                  url:'fileUrl',

 }里面home的作用，这个是你后端给你返回文件地址看有没有前缀，就这么讲，你看看返回的地址完整不，比如像我返回的

里面的地址全的，你复制到浏览器就可以打开，

 

这时候就不用home ,home是拼接到url前面的，完整的时候就不用拼接，upload的其他基础用法网上很多 ，下面说说父表单上如何链接，如下是我新增编辑的页面：

 上传了文件，我想要在前面父页面上链接显示，并且双击下载：

点击下载就是链接，这时候用到上面的卡槽：

<template slot-scope="scope" slot="trainFile">
			    <div>
			      <el-link :href="scope.row.trainFile" target="_blank">点击下载</el-link>
			    </div>
			</template>

 并且要在column中设置slot:true,这样就链接好了，点击下载就会：

 其余代如下：

 methods: {
			uploadBefore(file, done, loading){
			      console.log(file)
			      done()
			//this.$message.success('上传前的方法')
			},
		    uploadAfter(res, done, loading){
				this.form.data=res.data;
			     console.log(res.data);
			      done();
			},
		 uploadPreview(file, column, done) {
			 debugger
			window.location.href =file.url;
			 },
}

像删除这些表较简单，就不再概述，以上就是avue表单在使用upload的时候的一些问题，需要其他代码或者其他问题的可以私信我，本文就结束了，顿首，，，，