【vue+element-ui】表格内嵌套输入框和上传图片的功能_el-table上传图片

表格内嵌套上传图片实现：

Data中我绑定的table格式：

tableData: [
  {
    reasonName: "消除",//左边小标题
    reasonValue: "",//第一行的“公司措施”
    jituanValue: "",//第一行的“集团措施”
    uploadFilePath1:[],//第一行的“整改前照片”
    uploadFilePath2:[],//第一行的“整改后照片”
    uploadFilePath3:[],//第一行的“事故6个月后照片”
  },
],
1
2
3
4
5
6
7
8
9
10

上传图片的接口返回的成功数据：

template中的el-table以及其包含的el-input和el-upload：

<el-table border :data="tableData" style="width: 100%">
	 <el-table-column label=" " prop="reasonName" />
	 <el-table-column label="正确措施及落实到位(公司)">
	   <template slot-scope="scope">
	     <el-input size="mini" v-model="scope.row.reasonValue" />
	   </template>
	 </el-table-column>
	 <el-table-column label="正确措施及落实到位(集团)">
	   <template slot-scope="scope">
	     <el-input size="mini" v-model="scope.row.jituanValue" placeholder="审批人填写区"/>
	   </template>
	 </el-table-column>
	 <el-table-column label="整改前照片">
	   <template slot-scope="scope">
	     <el-upload
	       action="/file/file/uploadDocOrImg"
	       list-type="picture-card"
	       :file-list="scope.row.uploadFilePath1"
	       :auto-upload="true"
	       :on-success="
	         (response, file, fileList) =>
	           handleSuccess(
	             response,
	             file,
	             fileList,
	             scope.$index,
	             1
	           )
	       "
	     >
	       <i slot="default" class="el-icon-plus"></i>
	       <div slot="file" slot-scope="{ file }">
	         <img
	           class="el-upload-list__item-thumbnail"
	           :src="path + file.uploadFilePath"
	           alt=""
	         />
	         <span class="el-upload-list__item-actions">
	           <span
	             class="el-upload-list__item-preview"
	             @click="handlePictureCardPreview(file)"
	           >
	             <i class="el-icon-zoom-in"></i>
	           </span>
	           <span
	             class="el-upload-list__item-delete"
	             @click="handleRemove(file, scope.$index, 1)"
	           >
	             <i class="el-icon-delete"></i>
	           </span>
	         </span>
	       </div>
	     </el-upload>
	     <el-dialog :visible.sync="dialogVisible" append-to-body>
	       <img width="100%" :src="path + dialogImageUrl" alt="" />
	     </el-dialog>
	   </template>
	 </el-table-column>
	 <el-table-column label="整改后照片">
	   <template slot-scope="scope">
	     <el-upload
	       action="/file/file/uploadDocOrImg"
	       list-type="picture-card"
	       :file-list="scope.row.uploadFilePath2"
	       :auto-upload="true"
	       :on-success="
	         (response, file, fileList) =>
	           handleSuccess(
	             response,
	             file,
	             fileList,
	             scope.$index,
	             2
	           )
	       "
	     >
	       <i slot="default" class="el-icon-plus"></i>
	       <div slot="file" slot-scope="{ file }">
	         <img
	           class="el-upload-list__item-thumbnail"
	           :src="path + file.uploadFilePath"
	           alt=""
	         />
	         <span class="el-upload-list__item-actions">
	           <span
	             class="el-upload-list__item-preview"
	             @click="handlePictureCardPreview(file)"
	           >
	             <i class="el-icon-zoom-in"></i>
	           </span>
	           <span
	             class="el-upload-list__item-delete"
	             @click="handleRemove(file, scope.$index, 2)"
	           >
	             <i class="el-icon-delete"></i>
	           </span>
	         </span>
	       </div>
	     </el-upload>
	   </template>
	 </el-table-column>
	 <el-table-column label="事故6个月后措施执行情况照片">
	   <template slot-scope="scope">
	     <el-upload
	       action="/file/file/uploadDocOrImg"
	       list-type="picture-card"
	       :file-list="scope.row.uploadFilePath3"
	       :auto-upload="true"
	       :on-success="
	         (response, file, fileList) =>
	           handleSuccess(
	             response,
	             file,
	             fileList,
	             scope.$index,
	             3
	           )
	       "
	     >
	       <i slot="default" class="el-icon-plus"></i>
	       <div slot="file" slot-scope="{ file }">
	         <img
	           class="el-upload-list__item-thumbnail"
	           :src="path + file.uploadFilePath"
	           alt=""
	         />
	         <span class="el-upload-list__item-actions">
	           <span
	             class="el-upload-list__item-preview"
	             @click="handlePictureCardPreview(file)"
	           >
	             <i class="el-icon-zoom-in"></i>
	           </span>
	           <span
	             class="el-upload-list__item-delete"
	             @click="handleRemove(file, scope.$index, 3)"
	           >
	             <i class="el-icon-delete"></i>
	           </span>
	         </span>
	       </div>
	     </el-upload>
	   </template>
	 </el-table-column>
	</el-table>
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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145

提取上传部分主要代码：

<el-table-column label="整改前照片">
  <template slot-scope="scope">
    <el-upload
      action="你自己的上传路径"
      list-type="picture-card"
      :file-list="scope.row.uploadFilePath1"   //你自己的图片列表
      :auto-upload="true"
      :on-success="
        (response, file, fileList) =>   //改造图片上传成功函数
          handleSuccess(
            response,
            file,
            fileList,
            scope.$index,
            1  //因为我一行是三个图片列表，都用这个函数，so这里1代表第一组图片
          )
      "
    >
      <i slot="default" class="el-icon-plus"></i>
      <div slot="file" slot-scope="{ file }">
        <img
          class="el-upload-list__item-thumbnail"
          :src="file.你接收的那个地址"
          alt=""
        />
        <span class="el-upload-list__item-actions">
          <span
            class="el-upload-list__item-preview"
            @click="handlePictureCardPreview(file)"//预览函数
          >
            <i class="el-icon-zoom-in"></i>
          </span>
          <span
            class="el-upload-list__item-delete"
            @click="handleRemove(file, scope.$index, 1)"//删除函数
          >
            <i class="el-icon-delete"></i>
          </span>
        </span>
      </div>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible" append-to-body> //预览弹出框
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </template>
</el-table-column>
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
41
42
43
44
45
46

JS
如果成功我需要给我的tabledata中push完成的对象数据
点击删除tabledata需要删除对应图片

handleSuccess(res, file, fileList, index, flag) {
      let aaaa = {
        uploadFilePath: res.data.uploadFilePath,
        fileName: res.data.fileName,
      };
      switch (flag) {
      //找到第一组 往进push 下面同理
        case 1:
          this.tableData[index].uploadFilePath1.push(aaaa);
          break;
        case 2:
          this.tableData[index].uploadFilePath2.push(aaaa);
          break;
        case 3:
          this.tableData[index].uploadFilePath3.push(aaaa);
          break;
      }
    },
    handleRemove(file, index, flag) {
      switch (flag) {
        case 1:
          for (
            let i = 0;
            i < this.tableData[index].uploadFilePath1.length;
            i++
          ) {
            let element = this.tableData[index].uploadFilePath1[i];
            if (element.uploadFilePath == file.uploadFilePath) {
              this.tableData[index].uploadFilePath1.splice(i, 1);
            }
          }
          break;
        case 2:
          for (
            let i = 0;
            i < this.tableData[index].uploadFilePath2.length;
            i++
          ) {
            let element = this.tableData[index].uploadFilePath2[i];
            if (element.uploadFilePath == file.uploadFilePath) {
              this.tableData[index].uploadFilePath2.splice(i, 1);
            }
          }
          break;
        case 3:
          for (
            let i = 0;
            i < this.tableData[index].uploadFilePath3.length;
            i++
          ) {
            let element = this.tableData[index].uploadFilePath3[i];
            if (element.uploadFilePath == file.uploadFilePath) {
              this.tableData[index].uploadFilePath3.splice(i, 1);
            }
          }
          break;
      }
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.uploadFilePath;
      this.dialogVisible = true;
    },
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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

然后你就得到了这样的上传表格！

回传也很简单，只要给tabledata中对应的uploadFilePath123相应赋值即可

 this.measureTableData = [
    {
      reasonName: "消除",
      reasonValue:this.editObjOne.xcPlanCompany || "",
      jituanValue: this.editObjOne.xcPlanGroup || "",
      uploadFilePath1:this.editObjOne.xcFrontImage || [],
      uploadFilePath2:this.editObjOne.xcAfterImage || [],
      uploadFilePath3:this.editObjOne.xcSixAfterImage || [],
    },
    ...
]
1
2
3
4
5
6
7
8
9
10
11

同理，上传文件的话，在slot-scope="{ file }"下面的数据就是：

<el-table-column label="其他标准的培训签字及考试记录（所在片区）">
  <template slot-scope="scope">
   <el-upload
      class="upload-demo"
      :action="actionUrl"
      :file-list="scope.row.uploadFilePath5"
      :on-success="
        (response, file, fileList) =>
          studyHandleSuccess1(
            response,
            file,
            fileList,
            scope.$index,
            5
          )
      ">
      <el-button size="small" icon="el-icon-plus">点击上传</el-button>
      <div slot="file" slot-scope="{ file }">
        <el-button type="text" style="color:#409EFF" @click="studyHandlePreview1(file)">{{file.fileName}}</el-button>
        <el-button type="text" icon="el-icon-delete" style="color:#F56C6C" @click="studyHandleRemove1(file, scope.$index, 5)"></el-button>
      </div>
    </el-upload>
  </template>
</el-table-column>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24