vue+elementui 的 el-upload 文件添加/多文件上传的表格内嵌实现
最编程
2024-05-01 21:18:19
...
<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>