el-upload重写`on-success`方法

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>
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值