以下内容是引用或者借鉴别人的，自己只是做个笔记，方便学习。理解错误的地方，欢迎评论。如有侵权，私聊我删除，未经允许，不准作为商业用途

新建表单时，有多个模板图，需要用table显示图片并上传更新图片，应用场景：商品模板等等，具体细节如何处理，点击在线运行，效果如图

核心代码，嵌套table的数据进来

:on-success="uploadSuccess2 = (res, file) =>{uploadSuccess(res, file, scope.row)}"

html代码

  <el-form ref="form" :model="formData" label-width="80px">
      <el-form-item label="商品名称" required>
        <el-input v-model="formData.name" placeholder="商品名称"></el-input>
      </el-form-item>
      <el-form-item label="商品模板" required>
        <el-table :data="tableData">
          <el-table-column type="index" width="50"></el-table-column>
          <el-table-column prop="name" label="样板名称" width="200">
            <template slot-scope="scope">
              <el-input v-model="scope.row.name" placeholder="样板名称"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="上传模板图" width="150">
            <template slot-scope="scope">
              <el-upload
                :action="actionUrl"
                :show-file-list="false"
                :before-upload="beforeUpload"
                :on-success="uploadSuccess2 = (res, file) =>{uploadSuccess(res, file, scope.row)}"
                accept="image/*"
              >
                <span v-show="!scope.row.url">上传图片</span>
                <img v-show="scope.row.url" :src="scope.row.url" width="120">
              </el-upload>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSubmit">保存</el-button>
      </el-form-item>
    </el-form>

js代码

export default {
  name: "App",
  components: {},
  data() {
    return {
      actionUrl: "http://www.baidu.com",
      pagination: {
        pageNo: 1
      },
      tableData: [],
      formData: {
        name: ""
      }
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    beforeUpload(file) {},
    uploadSuccess(res, file, row) {
      row.url = res.datas && res.datas[0].url;
    },

    // 查询
    handleSearch() {
      this.pagination.pageNo = 1;
      this.getList();
    },

    // 请求数据，此处用静态数据模拟，正式生产替换为网络请求数据即可
    getList() {
      let list = [];
      if (this.pagination.pageNo == 1) {
        for (let i = 1; i <= 10; i++) {
          let item = {
            id: i,
            name: "",
            url: ""
          };
          list.push(item);
        }
      }
      this.tableData = list;
    },
    // 提交的数据
    handleSubmit() {}
  }
};