<template>
<div>
<el-form v-for="(product, index) in products" :key="index" :model="product" class="product-form">
<div>
<h3>{
{ (index + 1) + ' 意向合作商品' }}</h3> <!-- 修改标题部分 -->
</div>
<el-form-item label="商品品牌" required>
<el-input v-model="product.brand" placeholder="请输入商品品牌,没有写‘无’"></el-input>
</el-form-item>
<el-form-item label="商品名称:" required>
<el-input v-model="product.name" placeholder="请输入商品名称"></el-input>
</el-form-item>
<el-form-item label="商品规格:" required>
<el-input v-model="product.specifications" placeholder="请输入商品规格"></el-input>
</el-form-item>
<el-form-item label="商品条形码:" required>
<el-input v-model="product.barcode" placeholder="请输入商品条形码,若无可填‘无’"></el-input>
</el-form-item>
<el-form-item label="供货价:" required>
<el-input v-model="product.supplyPrice" placeholder="请输入供货价"></el-input>
</el-form-item>
<el-form-item label="市场零售价:" required>
<el-input v-model="product.retailPrice" placeholder="请输入市场零售价"></el-input>
</el-form-item>
<el-form-item label="推荐给补贴的理由:" required>
<el-input v-model="product.reason" placeholder="请输入商品竞争优势"></el-input>
</el-form-item>
<el-form-item label="商品附件:">
<el-upload
:action="uploadAction"
:on-success="handleFileUpload"
:file-list="product.fileList"
:data="() => ({ index })"
>
<el-button type="primary">上传文件</el-button>
</el-upload>
<p>请上传优势证明文件,如获奖、市场接受度、平台销售数据等</p>
</el-form-item>
</el-form>
<el-button type="primary" @click="addProduct">+ 添加意向合作商品</el-button>
</div>
</template>
<script>
export default {
data() {
return {
products: [
{
brand: '',
name: '',
specifications: '',
barcode: '',
supplyPrice: '',
retailPrice: '',
reason: '',
fileList: []
}
],
uploadAction: 'https://jsonplaceholder.typicode.com/posts/' // Replace with your actual upload URL
};
},
methods: {
addProduct() {
this.products.push({
brand: '',
name: '',
specifications: '',
barcode: '',
supplyPrice: '',
retailPrice: '',
reason: '',
fileList: []
});
},
handleFileUpload(response, file, fileList) {
const index = file.data.index;
this.products[index].fileList = fileList;
}
}
};
</script>
<style scoped>
.product-form {
border: 1px solid #ddd;
padding: 20px;
margin-bottom: 20px;
}
</style>
vue2添加模块 模板 照着抄就行
猜你喜欢
转载自blog.csdn.net/qq_44759522/article/details/139752753
今日推荐
周排行