elementui表格嵌套上传文件，多个上传控件，可以删除、添加

<template>
	<el-table :data="tableData" @cell-click="cellTable">
		<el-table-column
		  label="文件"
			:render-header="renderHeader"
		  show-overflow-tooltip>
		  <template slot-scope="scope">
				<el-upload class="upload-demo" :ref="scope.row.id+'uploadwj'" :data="extraData" :action="上传文件接口" :accept="uploadType" :limit="1" :on-exceed="handleExceed"
				 :on-success="quillImgSuccesswj" :on-error="uploadError" :before-upload="quillImgBeforewj" :on-preview="handlePreviewwj"
				 :before-remove="handleRemovewj" :file-list="scope.row.fileListwj">
		    	<el-button size="small"><i class="el-icon-upload2" @click="curRowIndex=scope.$index"></i> 上传文件</el-button>
		    </el-upload>
		  </template>
		</el-table-column>
	</el-table>
	<form ref="downloadForm" :action="downLoadForm.action">
		<input type="hidden" name="bodyurl" v-model="downLoadForm.bodyurl" />
		<input type="hidden" name="token" v-model="downLoadForm.token" />
		<input type="hidden" name="filename" v-model="downLoadForm.filename" />
	</form>
</template>

<script>
	import axios from 'axios'
	import {  getToken} from "@/api/user";  //获取token接口
	export default {
		methods: {
			// 上传正文
			cellTable(row, column, event, cell) {
				this.clickId=row.id
			},
			// render 事件
			renderHeader (h,{column}) { // h即为cerateElement的简写，具体可看vue官方文档
				return h(
					'div',
					[ 
						h('span', column.label),
						h('span', {
							class:'Stat',
						})
					],
				);
			 },
			handleRemovewj(file, fileList) {   //删除文件
				var filter_arr = this.tableData.filter((d) =>{
					if(d.fileListwj && d.fileListwj.length>0){
					return	d.fileListwj[0].uid === file.uid
					}
				});
				filter_arr[0].fileListwj = fileList.filter((v) => {
					return v.uid !== file.uid;
				});
				return true;
			},
			quillImgBeforewj(file, files) {       //上传前判断
				// console.log('quillImgBeforewj',file, files)
				// let b = filter_arr[0].fileListwj.filter((v) => {
				// 	return v.fileName === file.name;
				// });
				let name = file.name.substring(file.name.lastIndexOf(".")).toLowerCase();
				if(this.uploadType.indexOf(name)==-1){
					this.$message.error(`含有不支持的文件类型:${name}`);
					return false
				}
				if (file.size > this.uploadSize * 1024 * 1024) {
					this.$message.error("上传文件过大");
					return false;
				}
				// if (b.length > 0) {
				// 	this.$message.error("不能上传重复文件");
				// 	return false;
				// }
			},
			handlePreviewwj(file, e) {         //下载
				this.axiosHandle(file,e)
			},
			axiosHandle(file,e){
				let loadingInstance = this.$loading({
					lock: true,
					text: "正在请求数据中",
					spinner: "el-icon-loading",
					background: "rgba(0, 0, 0, 0.7)",
				});
				var url=file.fileUrl?file.fileUrl :file.textAddr
				axios({
						method: "post",
						url:'判断文件是否存在的接口'
					})
					.then((res) => {
						loadingInstance.close();
						if (res.data.status === 0) {
							let url = '下载文件的接口'
							this.downLoadForm = {
								bodyurl: file.fileUrl ?file.fileUrl :file.textAddr,
								token: this.uploadToken,
								filename: file.fileName?file.fileName :file.textName,
								action: url,
							};
							setTimeout(() => {
								this.$refs.downloadForm.submit();
							}, 10);
						} else {
							this.$message.error(res.data.msg);
						}
						return false;
					})
					.catch((err) => {
						loadingInstance.close();
						this.$message.error("下载文件失败");
					});
			},
			getT() {           //获取token
				getToken()
					.then((res) => {
						if (res.code == 200) {
							if (res.data) {
								this.uploadToken = res.data;
								this.extraData.token = this.uploadToken;
							}
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch((err) => {
						this.$message.error("获取token失败");
					});
			},
			handleExceed(files, fileList) {
			  this.$message.warning(
			    `当前限制选择 1 个文件，本次选择了 ${
			      files.length
			    } 个文件，共选择了 ${files.length + fileList.length} 个文件`
			  );
			},
			quillAll(res,file,fileAll){
				if (res.status == 0) {
					if (res.value && res.value.length > 0) {
						axios({
								method: "post",
								url: '上传文件的接口及参数'
							})
							.then((res1) => {
								if(res1.data.status==402){
									this.$message.error(res1.data.msg);
									return
								}
								let argfilename=res.value[0].fileName
								argfilename =argfilename.substring(0,argfilename.lastIndexOf('.'))+'.ofd'
								res1.data.value[0].name = argfilename;
								res1.data.value[0].fileName = argfilename;
								fileAll.push(res1.data.value[0]);
							})
							.catch((err) => {
								
							});
						
					} else {
						this.$message.error(res.msg);
						fileAll = fileAll.filter(
							(v) => v.fileName !== file.name
						);
					}
				} else {
					this.$message.error(res.msg);
					fileAll = fileAll.filter(
						(v) => v.fileName !== file.name
					);
				}
			},
			quillImgSuccesswj(res, file,fileList) {         //上传成功
				 var filter_arr = this.tableData.filter((d) => d.id === this.clickId);
				this.quillAll(res, file,filter_arr[0].fileListwj)
			},
			uploadError() {
				this.$message.error("上传失败");
			},
			addRow(){
				this.tableData.push({
					fileListwj:[],
					id: new Date().getTime(),
				})
			},
		},
		computed: {
			
		},
		
		activated() {
			this.addRow()   //初始化
			this.getT() //获取token
		},
		data() {
			return {
				tableData:[{
				fileListwj:[],
				  id: new Date().getTime(),
				  }],
				clickId:'',
			}
		}
	}
</script>