elementUI中el-table中使用el-upload

项目中需要在行里加入上传文件，又不好获取scope.row的中参数，差了老多资料解决了

<template>
   <el-table-column label="操作" width="270" fixed="right">
            <template slot-scope="scope">
              <el-upload
                class="upload-demo"
                ref="upload"
                action="#"
                :data="paramsObj"
                :http-request="
                  (file) => {
                    return uploadFile(file, scope.row);
                  }
                "
                :show-file-list="false"
                :before-upload="beforeUpload"
              >
                <el-button type="text" size="small">上传文件模板</el-button>
              </el-upload>
              <el-button
                type="text"
                size="small"
                @click="changeStatus(scope.row)"
                >{{ scope.row.enabledFlag ? "停用" : "启用" }}</el-button
              >
              <el-button
                @click="updateTemplate(scope.row)"
                type="text"
                size="small"
                >编辑</el-button
              >
              <el-button
                type="text"
                size="small"
                @click="delTemplate(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

<script>
   //  文件上传
    uploadFile(file, row) {
      this.fileName = file.file.name;
      const formData = new FormData();
      formData.append("file", file.file);
      formData.append("templateId", row.id);
      api.upload(formData).then((res) => {
        if (res.status == 200) {
          this.reaultData = res.data.data;
          this.$message({
            type: "success",
            message: "上传成功",
          });
          this.getTemplateList();
        } else {
          this.$message({
            type: "error",
            message: "上传失败",
          });
        }
      });
    },
    //  文件上传之前的校验
    beforeUpload(file) {
      let fileSize = file.size / 1024 / 1024;
      let isXls =
        file.name.split(".")[file.name.split(".").length - 1] === "xls";
      let isXlsx =
        file.name.split(".")[file.name.split(".").length - 1] === "xlsx";
      if (!isXls && !isXlsx) {
        this.$message.warning("上传文件只能是xls、xlsx格式！");
        return;
      }
      if (fileSize > 10) {
        this.$message.warning("文件超过10MB,请重新上传！");
        return;
      }
    }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40