以下内容是引用或者借鉴别人的,自己只是做个笔记,方便学习。理解错误的地方,欢迎评论。如有侵权,私聊我删除,未经允许,不准作为商业用途
新建表单时,有多个模板图,需要用table显示图片并上传更新图片,应用场景:商品模板等等,具体细节如何处理,点击在线运行,效果如图
image.png核心代码,嵌套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() {}
}
};
网友评论