el-upload上传成功需要传入行数据,方便操作数据,可以重写
on-success方法
<template>
<el-table :data="tableData">
<el-table-column label="Spectrum" prop="spectrumUrl" show-overflow-tooltip>
<template #default="scope">
<el-upload
ref="upload"
:action="uploadUrl"
:limit="1"
:headers="getHeaders(scope.row)"
auto-upload
:before-upload="() => beforeUpload(scope.row)"
:on-exceed="handleExceed"
:on-success="(response, file, fileList) => handleUploadNmrSuccess(response, file, fileList, scope.row)"
:on-remove="(file, fileList) => handleRemoveNmr(file, fileList, scope.row)"
:disabled="store.isReadonly"
>
<el-tooltip v-if="showNmrUpload" content="limit 1 file, new file will cover the old file" placement="top">
<el-button type="primary" size="small" icon="Upload" :disabled="store.isReadonly"/>
</el-tooltip>
</el-upload>
{{ scope.row.spectrumUrl }}
</template>
</el-table-column>
</el-table>
</template>
<script>
import { Upload } from '@element-plus/icons-vue';
import { mapState } from 'vuex';
export default {
components: {
Upload,
},
computed: {
...mapState(['isReadonly']),
headers() {
return {
// your headers here
};
},
tableData() {
return [
// your table data here
];
},
uploadUrl() {
return 'your-upload-url'; // replace with your actual upload URL
},
showNmrUpload() {
return true; // adjust as needed
},
},
methods: {
getHeaders(row) {
return {
...this.headers,
// add any additional headers you need here
};
},
beforeUpload(row) {
// you can modify this function to include any logic you need before uploading
console.log('Uploading for row:', row);
return true;
},
handleExceed(files, fileList) {
this.$message.warning(`The limit is 1 file, ${files.length} files are selected`);
},
handleUploadNmrSuccess(response, file, fileList, row) {
console.log('Upload success:', response, file, fileList, row);
// update your table data or perform other actions after successful upload
},
handleRemoveNmr(file, fileList, row) {
console.log('File removed:', file, fileList, row);
// perform any necessary actions when a file is removed
},
},
};
</script>