表格el-table 图片上传回显

要在表格中上传图片并显示回显，可以使用 el-table 中的自定义模板和 el-upload 组件。

首先，需要在 el-table 中定义一个自定义模板来显示图片。假设你的表格数据有一个字段叫做 "image"，存储了图片的 URL，那么可以这样定义模板：

<el-table-column label="Image">
  <template slot-scope="scope">
    <img :src="scope.row.image" style="max-width: 100px; max-height: 100px;">
  </template>
</el-table-column>

这个模板会在表格中为每一行显示一张图片，图片的 URL 来自当前行的 "image" 字段。

接下来，需要在表格中添加一个上传组件，并在上传成功后更新表格数据中的 "image" 字段。可以使用 el-upload 组件来实现这个功能。假设你的上传接口为 "/api/upload"，可以这样定义上传组件：

<el-table-column label="Upload">
  <template slot-scope="scope">
    <el-upload
      action="/api/upload"
      :on-success="handleUploadSuccess(scope.row)"
      :show-file-list="false">
      <el-button>Click to Upload</el-button>
    </el-upload>
  </template>
</el-table-column>

这个上传组件会在每一行中显示一个按钮，点击按钮可以上传图片。上传成功后，会调用 "handleUploadSuccess" 函数，并传入当前行的数据作为参数。在 "handleUploadSuccess" 函数中，可以更新表格数据中的 "image" 字段：

methods: {
  handleUploadSuccess(row) {
    // 更新当前行的 image 字段
    row.image = '/uploads/' + file.name;
  }
}

在这个例子中，假设上传成功后返回了上传文件的名称，那么就可以将 "image" 字段更新为 "/uploads/文件名"，并在表格中显示出来。注意，在实际情况中，可能需要根据上传接口返回的数据来更新 "image" 字段。

最后，需要在表格组件中添加 "border" 属性，以便显示表格边框：

<el-table :data="tableData" border>
  <!-- 定义自定义模板和上传组件 -->
</el-table>

这样就可以在 el-table 中上传图片并显示回显了。