vue+elementui的table行内实现el-upload文件上传

官网案例:elementui中upload文件上传
直接上代码
<el-table :data="tableData">
	<el-table-column prop="file_name" lable="文件名称">
		<template scope="scope">
			<el-input v-model="scope.row.file_name" placeholder="请输入文件名称"></el-input>
		</template>
	</el-table-column>
	<el-table-column>
		<template scope="scope">
			<el-upload ref="upload" :data="uploadData" :show-file-list="false" action="uploadUrl" :on-success="handleSucess" :on-error="handleError" :auto-upload="true">
  <el-button size="small" type="primary" @click="curRowIndex=scope.$index">点击上传</el-button>
  /*主要特别注意这里新增的@click方法将当前的index值赋值一个变量,否则无法获取到对应的行信息*/
</el-upload>
		</template>
	</el-table-column>
</el-table>
<script>
	export default{
		data() {
			return {
				tableData: [],
				uploadData: {
					file_key: 'file',
					business_id: '',
				},
				uploadUrl: '',
				curRowIndex: null,
			}
		},
		handleSucess(response, file, fileList){
		
		},
		handleError(err, file, fileList){
		
		}
	}
</script>
主要实现:主要实现elementuitable的行内上传el-upload文件的操作

转载于:https://my.oschina.net/yxmBetter/blog/1928068

Logo

前往低代码交流专区

更多推荐