1.sku多规格效果图

商品的sku涉及到很多动态表单，因为分为单规格和多规格。而每次一到写动态表单就让人头疼。所以特此记录一下，方便自己下次再用也帮助他人减少麻烦。闲话少叙，先看效果图。

 上面的部分输入表单可以无视了，主要还是动态商品规格sku的添加。上代码：

2.在vue框架中使用

<template>
	<div class="goodsdetails">
		<div class="title" style="display: flex;justify-content: space-between;align-items: center;">
			<el-page-header @back="goBack" :content="title"></el-page-header>
			<el-button type="primary" size="small" @click="submit">保存</el-button>
		</div><a-divider />
		<el-descriptions title="基础信息"></el-descriptions>
		<el-form :model="ruleForm" :inline="false"   ref="ruleForm" label-width="100px" class="demo-ruleForm">
		  <el-form-item label="封面图:">
		     <Uploadimg :limit="1"  :key="timer"  :filelist="ruleForm.image"  @getfile="filelist"></Uploadimg>
		  </el-form-item>
		  <el-form-item label="轮播图:">
		     <Uploadimg :limit="3"  :key="timer" :filelist="ruleForm.sliderImage"  @getfile="filelistarr"></Uploadimg>
		  </el-form-item>
		  <el-form-item label="商品分类:" >
		    <el-cascader ref="myCascader"  style="width:360px" @change="getpositionName" v-model="ruleForm.cateId" :options="options" placeholder="请选择分类" :props="{ emitPath:false,checkStrictly: true,value:'id',label:'name'}"  class="ml-4"></el-cascader>
		  </el-form-item>
		  <el-form-item label="商品名称:" >
		    <el-input v-model="ruleForm.storeName"></el-input>
		  </el-form-item>
		  <el-form-item label="商品简介:" >
		    <el-input v-model="ruleForm.storeInfo"></el-input>
		  </el-form-item>
		  <el-form-item label="详细描述:" >
		    <el-input v-model="ruleForm.description"></el-input>
		  </el-form-item>
		  <el-form-item label="返现积分:" >
		    <el-input v-model="ruleForm.giveIntegral" type="number" min=0></el-input>
		  </el-form-item>
		  <el-form-item label="销量:" >
		    <el-input v-model="ruleForm.ficti" type="number" min=0></el-input>
		  </el-form-item>
		  <el-form-item label="关键词:" >
		    <el-tag :key="tag" v-for="tag in dynamicTags" closable :disable-transitions="false" @close="handleClosekey(tag)">
		      {{tag}}
		    </el-tag>
			<el-input
			  class="input-new-tag"
			  v-if="inputVisible"
			  v-model="inputValue"
			  ref="saveTagInput"
			  size="small"
			  @keyup.enter.native="handleInputConfirmkey"
			  @blur="handleInputConfirmkey"
			>
			</el-input>
			<el-button v-else class="button-new-tag" size="small" @click="showInputkey">+ New Tag</el-button>
		  </el-form-item>
		  <el-form-item label="排序:" >
		    <el-input v-model="ruleForm.sort" placeholder="数值越大越靠前" type="number" min=0></el-input>
		  </el-form-item>
		  <el-form-item label="是否多规格:" >
		    <el-switch v-model="ruleForm.specType"></el-switch>
		  </el-form-item>
		  <el-form-item label="是否积分商品:" >
		    <el-switch v-model="ruleForm.integralType"></el-switch>
		  </el-form-item>
		  <!-- 规格 -->
		  <el-divider></el-divider>
		  <div>
		          <div class="goods-spec" v-if="ruleForm.specType">
		            <h3>商品规格</h3>
		            <el-link type="primary" @click="addPrivateSpec" class="goods-spec-add">添加规格</el-link>
		          </div>
		          <div v-if="ruleForm.specType" class="goods-container" v-for="(attr, index) in items" :key="index">
		            <div class="goods-content">
		              <div class="goods-content-box">
		                <div class="goods-content-left">
		                  <el-form label-width="80px" style="width:400px">
		                    <el-form-item label="规格名">
		                      <el-input v-model="attr.value" placeholder="请输入规格名"></el-input>
		                    </el-form-item>
		                    <el-form-item label="规格值">
		                      <el-tag v-for="tag in attr.detail" :key="tag" closable :disable-transitions="false" @close="handleClose(tag, attr)">
		                        {{ tag }}
		                      </el-tag>
		                      <el-input
		                        class="input-new-tag"
		                        v-if="attr.inputVisible"
		                        v-model="attr.inputValue"
		                        :ref="`saveTagInput${index}`"
		                        size="small"
		                        @keyup.enter.native="handleInputConfirm(attr.inputValue, attr)"
		                        @blur="handleInputConfirm(attr.inputValue, attr)"
		                      >
		                      </el-input>
		                      <el-button v-else class="button-new-tag" size="small" @click="showInput(attr, index)">+ 添加</el-button>
		                    </el-form-item>
		                  </el-form>
		                </div>
		                <div class="goods-content-right">
		                  <el-link type="danger" @click="delPrivateSpec(index)">删除规格</el-link>
		                </div>
		              </div>
		            </div>
		          </div>
		  
		          <p style="margin:24px 0 10px 0">价格 / 库存</p>
		          <el-table ref="multipleTable" :data="tableColumnList.tableBodyList" stripe tooltip-effect="dark" style="width: 100%;margin-top:1%;">
		            <el-table-column :label="item.propName" :property="item.prop" v-for="item in tableColumnList.tableHeaderList" :key="item.prop" align="center">
		              <template slot-scope="scope">
		                <span>{{ scope.row[scope.column.property] }}</span>
		              </template>
		            </el-table-column>
					<el-table-column label="商品条码">
					  <template slot-scope="scope">
					    <el-input v-model="scope.row.barCode"></el-input>
					  </template>
					</el-table-column>
					<el-table-column label="价格（元）">
					  <template slot-scope="scope">
					    <el-input v-model.number="scope.row.price"></el-input>
					  </template>
					</el-table-column>
					<el-table-column label="成本价（元）">
					  <template slot-scope="scope">
					    <el-input v-model.number="scope.row.cost"></el-input>
					  </template>
					</el-table-column>
					<el-table-column label="原价（元）">
					  <template slot-scope="scope">
					    <el-input v-model.number="scope.row.otPrice"></el-input>
					  </template>
					</el-table-column>
		            <el-table-column label="库存">
		              <template slot-scope="scope">
		                <el-input v-model.number="scope.row.stock"></el-input>
		              </template>
		            </el-table-column>
		            <el-table-column label="体积">
		              <template slot-scope="scope">
		                <el-input v-model="scope.row.volume"></el-input>
		              </template>
		            </el-table-column>
					<el-table-column label="重量">
					  <template slot-scope="scope">
					    <el-input v-model="scope.row.weight"></el-input>
					  </template>
					</el-table-column>
					<el-table-column label="兑换所需积分" v-if="ruleForm.integralType">
					  <template slot-scope="scope">
					    <el-input v-model="scope.row.integral"></el-input>
					  </template>
					</el-table-column>
		          </el-table>
		  </div>
		  <!-- <el-button type="primary" style="width: 20%;margin-left: 30%;margin-top: 20px;">保存</el-button> -->
		</el-form>
	</div>
</template>

<script>
	import Uploadimg from "@/components/Uploadimg";
	export default {
	    data(){
			return{
				ruleForm: {
					cateId:'',
					cateName:'',
					image:[],
					sliderImage:[],
				    storeName: '',
				    storeInfo: '',
				    description: '',
				    giveIntegral: '',
				    ficti: '',
				    sort: '',
				    specType: false,
					integralType:false,
				},
				dynamicTags: ['标签一', '标签二'],  //关键词
				inputVisible: false,
				inputValue: '',
				tableColumnList: {
				            tableHeaderList: [],
				            tableBodyList: [
								{
									
								}
							]
				            // inventory: ''
				          },
				items: [    //sku属性
				        {
				            value: '', //规格名
				            detail: [], //规格值数组
				            inputVisible: false,
				            inputValue: ''
				        }
				],
				options:[],   //商品类列表
				id:"",   //无则添加有则编辑
				timer:'',  //刷新子组件
				title:"",
			}
		},
		mounted(){
			this.title="添加商品"
			if(this.$route.query.id){
				this.id=this.$route.query.id;
				this.title="商品信息"
				this.getdetails();
			}
			this.getoptions();
			
		},
		computed: {
		          // 计算规格
		          calculateAttribute() {
		            // 初始化
		            let obj = {}
		            this.items.forEach((item) => {
		              // 判断有没有输入规格名
		              if (item.value) {
		                //规格名:规格值     //'颜色':'尺寸'
		                obj[item.value] = item.detail
		              }
		            })
		            return obj
		          }
		},
		watch: {
		          // 监听规格数据
		          calculateAttribute(newVal) {
					if(!this.ruleForm.specType){return;}
					this.attribute(newVal);
		//             let cloneNewVal = JSON.parse(JSON.stringify(newVal))
		//             let attrName = [] //规格名数组
		//             let attrValue = [] //规格值数组
		//             for (let key in cloneNewVal) {
		//               attrName.push(key)
		//               attrValue.push(cloneNewVal[key])
		//             }
					
		//             // 表格内容数据（笛卡尔积算法）
		//             let finalArr = this.cartesianProductOf(...attrValue)
		
		//             let tableObj = {
		//               tableBodyList: [],
		//               tableHeaderList: []
		//             }
		//             // 表格内容
		//             tableObj.tableBodyList = finalArr.map((item) => {
		//               let obj = {
		//                barCode: '',   //商品条码
		//                cost:0,        //成本价
		//                otPrice:0,     //原价
		//                price:0,       //现价
		//                stock: 0,	   //库存
		//                volume:'',     //体积
		//                weight:'',     //重量
		//               }
		//               for (let i = 0; i < item.length; i++) {
		//                 obj[attrName[i]] = item[i]
		//               }
		//               return obj
		//             })
		//             this.tableColumnList.tableBodyList = tableObj.tableBodyList //表格内容数据
		
		//             // 表头
		//             let skuTableArr = Object.keys(newVal)
		//             tableObj.tableHeaderList = skuTableArr.map((item) => {
		//               return {
		//                 prop: item,
		//                 propName: item
		//               }
		//             })
		//             this.tableColumnList.tableHeaderList = tableObj.tableHeaderList // 表头
		          },
				  'ruleForm.specType':{
					  deep:true,
					  handler:function(newV,oldV){
					        if(!newV){
								this.tableColumnList= this.$options.data().tableColumnList;
								this.items=this.$options.data().items;
							}
					  }
				  }
		},
		methods: {
			getpositionName(){
				 const info = this.$refs.myCascader.getCheckedNodes()[0];
				 this.ruleForm.cateName=info.label;
			},
			getoptions(){	//获取商品分类列表
				const that = this;
				this.$api.categorylist({}).then(function (response) {
						if(response.code==0){
							that.options=that.removeEmptyChildren(response.data);
						}else{
							that.$message({
								 message: response.message,
								 center: true,
								 type: 'warning',
							});
						}
				})
			},
			removeEmptyChildren (node) {   //杀生
				var that=this;
				node.forEach(item => {
				if ('children' in item && item.children.length === 0) {
					delete item.children
				} else if ('children' in item && item.children.length) {
					that.removeEmptyChildren(item.children)
				}
				})
				return node;
			},
			attribute(newVal){
				var that=this;
				this.$api.goodssku(that.items).then(res=>{
					if(res.code==0){
						// console.log("属性",res);
						let cloneNewVal = JSON.parse(JSON.stringify(newVal))
						let attrName = [] //规格名数组
						let attrValue = [] //规格值数组
						for (let key in cloneNewVal) {
						  attrName.push(key)
						  attrValue.push(cloneNewVal[key])
						}
						
						// 表格内容数据（笛卡尔积算法）
						let finalArr = this.cartesianProductOf(...attrValue)	
						let tableObj = {
						  tableBodyList: [],
						  tableHeaderList: []
						}
						// 表格内容
						tableObj.tableBodyList = res.data.map((item) => {
						  var detail=item.detail;
						  return Object.assign(item, detail);
						})
						this.tableColumnList.tableBodyList = tableObj.tableBodyList //表格内容数据
						this.tableColumnList.tableBodyList = res.data;
						// 表头
						let skuTableArr = Object.keys(newVal)
						tableObj.tableHeaderList = skuTableArr.map((item) => {
						  return {
						    prop: item,
						    propName: item
						  }
						})
						this.tableColumnList.tableHeaderList = tableObj.tableHeaderList // 表头
					}else{
						this.$message({
							 message: res.message,
							 center: true,
						});
					}
				}).catch(err=>{console.log("网络错误",err)})
			},
			//上传的图片列表
			filelist(list){
				console.log("封面图片：",list)
				this.ruleForm.image=list;
			},
			filelistarr(list){
				console.log("轮播图片：",list)
				this.ruleForm.sliderImage=list;
			},
			goBack(){
				 this.$router.go(-1);
			},
			//关键词操作
			handleClosekey(tag) {
			        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
			},
			
			showInputkey() {
			    this.inputVisible = true;
			    this.$nextTick(_ => {
			          this.$refs.saveTagInput.$refs.input.focus();
			    });
			},
			handleInputConfirmkey() {
			    let inputValue = this.inputValue;
			    if (inputValue) {
			        this.dynamicTags.push(inputValue);
			    }
			    this.inputVisible = false;
			    this.inputValue = '';
			},
			//获取详情
			getdetails(){
				var that=this;
				this.$api.goodsdetails({id:that.id}).then(res=>{
					if(res.code==0){
						console.log("商品：",res);
						that.ruleForm=res.data;
						that.ruleForm.image=res.data.image.split(",");
						that.ruleForm.sliderImage=res.data.sliderImage.split(",");
						that.dynamicTags=res.data.keyword.split(",");
						that.items=res.data.items.map(item=>{
							item.inputValue="";
							item.inputVisible=false;
							return item;
						})
						setTimeout(()=>{
							let tablearr=[];
							for(var i=0; i<res.data.attrs.length;i++){
								tablearr.push(Object.assign(that.tableColumnList.tableBodyList[i],res.data.attrs[i]));
							}
							that.tableColumnList.tableBodyList=tablearr;
						},500)
						
						that.timer = new Date().getTime();
					}else{
						this.$message({
							 message: res.message,
							 center: true,
						});
					}
				}).catch(err=>{console.log("网络错误",err)})
			},
			submit(){
				var that=this;
				var obj;
				if(this.id){  //编辑
					obj=JSON.parse(JSON.stringify(that.ruleForm));
					obj.id=that.id;
					obj.items=that.items;
					obj.attrs=that.tableColumnList.tableBodyList;
					obj.keyword=that.dynamicTags.toString();
					obj.image=obj.image.toString();
					obj.sliderImage=obj.sliderImage.toString();
					this.$api.goodsedit(obj).then(res=>{
						if(res.code==0){
							this.$message({
								 type:"success",
								 message: res.message,
								 center: true,
							});
							that.$router.push({path:'/product/goods'})
						}else{
							this.$message({
								 message: res.message,
								 center: true,
							});
						}
					}).catch(err=>{console.log("网络错误",err)})
				}else{
					obj=JSON.parse(JSON.stringify(that.ruleForm));
					
					obj.items=that.items;
					obj.attrs=that.tableColumnList.tableBodyList;
					obj.keyword=that.dynamicTags.toString();
					obj.image=obj.image.toString();
					obj.sliderImage=obj.sliderImage.toString();
					this.$api.goodsadd(obj).then(res=>{
						if(res.code==0){
							this.$message({
								 type:"success",
								 message: res.message,
								 center: true,
							});
							that.$router.push({path:'/product/goods'})
						}else{
							this.$message({
								 message: res.message,
								 center: true,
							});
						}
					}).catch(err=>{console.log("网络错误",err)})
				}
			},
			/*****规格*****/
		    // 添加规格
		    addPrivateSpec(index) {
		            this.items.push({
		              value: '',
		              detail: [],
		              inputVisible: false,
		              inputValue: ''
		            })
		    },
		    delPrivateSpec(index) {
		            this.items.splice(index, 1)
		    },
		    handleInputConfirm(val, attr) {
		        if (val) {
		            attr.detail.push(val)
		        }
		        attr.inputVisible = false
		        attr.inputValue = ''
		    },
		    handleClose(tag, item) {
		            item.detail.splice(item.detail.indexOf(tag), 1)
		    },
		    showInput(attr, index) {
		        attr.inputVisible = true
		            this.$nextTick((_) => {
		              this.$refs[`saveTagInput${index}`][0].$refs.input.focus()
		        })
		    },
		    // 笛卡尔积算法
		    cartesianProductOf(...args) {
		            return args.reduce(
		              (total, current) => {
		                let ret = []
		                total.forEach((a) => {
		                  current.forEach((b) => {
		                    ret.push(a.concat([b]))
		                  })
		                })
		                return ret
		              },
		              [[]]
		            )
		    }

		},
		components:{
			Uploadimg:Uploadimg,
		}
	};
</script>
<style scoped>
	.goodsdetails{
		height: 100%;
		width: 100%;
		background: #FFFFFF;
		padding: 30px;
	}
	.goodsdetails .demo-ruleForm{
		width: 100%;
		/* display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap; */
	}
	.goodsdetails .demo-ruleForm>div{
		width: 80%;
	}
	.goodsdetails .el-tag + .el-tag {
	    margin-left: 10px;
	  }
	.goodsdetails  .button-new-tag {
	    margin-left: 10px;
	    height: 32px;
	    line-height: 30px;
	    padding-top: 0;
	    padding-bottom: 0;
	  }
	.goodsdetails  .input-new-tag {
	    width: 90px;
	    margin-left: 10px;
	    vertical-align: bottom;
	  }
	/* .goodsdetails .uploadimg{
		display: flex;
		width: 80vw;
	} */
	.goods-spec {
	        display: flex;
	        justify-content: space-between;
	        margin-bottom: 10px;
	 }
	      .goods-spec .goods-spec-add {
	        margin-right: 15px;
	      }
	
	      .goods-container .button-new-tag {
	        height: 32px;
	        line-height: 30px;
	        padding-top: 0;
	        padding-bottom: 0;
	      }
	      .goods-container .input-new-tag {
	        width: 90px;
	        margin-right: 10px;
	        vertical-align: bottom;
	      }
	      .goods-container .el-tag {
	        margin-right: 10px;
	      }
	      .goods-container .goods-content {
	        margin-bottom: 10px;
	        padding: 14px;
	        border: 1px solid #ebeef5;
	        border-radius: 4px;
	        background-color: #fcfcfc;
	      }
	      .goods-content .goods-content-box {
	        display: flex;
	        align-items: center;
	      }
	      .goods-content-box .goods-content-left {
	        flex: 1;
	      }
</style>

这是单个的vue文件，在使用之前，先确保你项目是否使用了element Ui组件。使用时直接复制到页面就行。可能会报错。

报错1：这里我使用了Uploadimg图片上传组件。主要是上传图片到阿里云oss。删掉即可。

报错2：页面加载时请求了接口，调用了方法this.getoptions();主要是拉取商品分类列表数据。注释和删掉即可。

其他的就是逻辑代码了。可以happy~奔放一下看到具体效果。

码字不易，转载请注明出处，谢谢~