怎么在点击上传文件的时候,将上传的文件,存到对应的对象中,并刷新视图?

作者站长头像
站长
· 阅读数 5

怎么在点击上传文件的时候,将上传的文件,存到对应的对象中,并刷新视图?视图部分

<el-table :data="fileListData" border>
                    <el-table-column align="center" width="50px">
                      <template slot-scope="scope">
                        <span v-if="scope.row.required" class="required_text"
                          >*</span
                        >
                      </template>
                    </el-table-column>
                    <el-table-column
                      type="index"
                      label="序号"
                      align="center"
                      width="80"
                    ></el-table-column>
                    <el-table-column
                      label="文件"
                      prop="fileName"
                      align="center"
                      width="300px"
                    ></el-table-column>
                    <el-table-column label="附件" align="center">
                      <template slot-scope="scope">
                        <div v-if="scope.row.fileAnnex != ''">
                          <a href="scope.row.fileAnnex"
                            >{{scope.row.fileAnnexName}}</a
                          >
                          <el-button
                            type="text"
                            size="small"
                            icon="el-icon-view"
                            >预览</el-button
                          >
                          <el-button
                            type="text"
                            size="small"
                            icon="el-icon-delete"
                            >删除</el-button
                          >
                        </div>
                        <div v-else>--</div>
                      </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" width="120">
                      <template slot-scope="scope">
                        <el-upload
                          class="awards_upload"
                          :action="ms.base+'/ms/file/upload.do'"
                          :on-remove="filePathHandleRemove"
                          :limit="1"
                          :data="{uploadPath:'/people/user','isRename':true,'appId':true}"
                          :on-success="filePathBasicPicSuccess(scope.row.fileId)"
                          :on-exceed="filePathHandleExceed"
                          :on-progress="filePathHandleProgress"
                          accept=".pdf"
                          show-file-list="false"
                          :file-list="scope.row.fileAnnex"
                        >
                          <el-button size="small" type="primary"
                            >点击上传</el-button
                          >
                        </el-upload>
                      </template>
                    </el-table-column>
                  </el-table>

js部分

fileListData: [
        {
          fileId: "fileName1",
          fileName: "项目基本情况表(盖章后扫描为pdf版)",
          fileAnnex: "",
          fileAnnexName: "",
          required: true,
        },
        {
          fileId: "fileName2",
          fileName: "项目简介",
          fileAnnex: "",
          fileAnnexName: "",
          required: true,
        },]
    //上传超过限制
    filePathHandleExceed(files, fileList) {
      this.$notify({
        title: "当前最多上传1份文件",
        type: "warning",
      });
    },
    //filePath文件上传完成回调
    filePathBasicPicSuccess(response, file, fileList) {
      if (response.result) {
        // this.filePath = response.data;
        // console.log(file);
        // this.ruleForm.filePath = [];
        // this.ruleForm.filePath.push({
        //   name: file.name,
        //   url: file.url,
        //   path: response.data,
        //   uid: file.uid,
        // });
        // this.isShow = true;
        console.log(this.filePath, this.ruleForm.filePath);
      } else {
        this.$notify({
          title: response.msg,
          type: "warning",
        });
      }
    },
    // 删除方法
    filePathHandleRemove(file, files) {
      var index = -1;
      index = this.ruleForm.filePath.findIndex(function (text) {
        return text == file;
      });

      if (index != -1) {
        this.ruleForm.filePath.splice(index, 1);
      }
      this.isShow = false;
    },
    filePathHandleProgress(event, file, fileList) {
      console.log(event, file, fileList);
    },
回复
1个回答
avatar
test
2024-06-28

方法1:

<el-table
    ref="table"
    :data="tableData"
    :key="itemKey"
></el-table>


// 在tableData更新的地方,顺便随机设置下key,页面就会刷新了
this.itemKey = Math.random()

方法2:用更新后的数据,覆盖之前的数据

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容