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

原创

已于 2022-06-20 11:58:23 修改 · 7.6k 阅读

32 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #webpack #前端

于 2022-03-04 16:01:41 首次发布

本文介绍了如何在Vue.js项目中，结合Element-UI组件库，实现在表格内部嵌套输入框和上传图片的功能。通过Data绑定表格数据，调用上传接口，将成功返回的图片数据添加到表格中。当用户删除图片时，可以从表格数据中移除对应的图片信息。最后，阐述了如何回传这些数据，包括上传的文件路径。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

表格内嵌套上传图片实现：
在这里插入图片描述
Data中我绑定的table格式：

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

上传图片的接口返回的成功数据：
在这里插入图片描述

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