vue2添加模块 模板 照着抄就行

<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>
  

猜你喜欢

转载自blog.csdn.net/qq_44759522/article/details/139752753