使用VUE与JQUERY 结合做后台产品规格处理非常简单的完成

先看实现的效果图

 

 

在后台项目做规格这一块，如果使用原生JQUERY来写肯定非常麻烦的，JS代码复杂繁多，后面我就想能不能用VUE和JQUERY来实现 ，果然这样是可行的，而且用VUE来做代码量非常的少减省了大量的时间，提交表单仍然用普通提交方式就可以，因为我们的规格数据是以JSON形式保存在表单里面的，直接提交到后台，前端JS取的时候转换一下就OK。

一、在产品表 product 中建三个字段来保存规格，我们以JSON的形式保存到数据库 

spec规格类型字段 0 单规格，1多规格 ，specjson 单规格字段，多规格speclistjson字段

二、HTML代码

 

/***产品规格***/
.spectable table{ margin-top:20px; margin-bottom:20px; width:100%; border-left:1px solid #eee; border-top:1px solid #eee;}
.spectable tr th,.spectable tr td{ padding:10px 12px; border-right:1px solid #eee; border-bottom:1px solid #eee;}
.spectable tr th{ background:#f7f7f7;}
.spectable tr th i{color:red;}
.spectable tr td .up{ width:60px; height:60px; cursor: pointer; border:1px solid #eee; overflow: hidden; background:#f7f7f7 url(../images/add.png) no-repeat center; background-size:30px auto;}
.spectable tr td .up img{ display: block; width:100%; height:100%; object-fit: cover;}
.spectable tr td.center{ text-align: center;}
.spectable tr td input{ border:1px solid #eee; width:100%; padding:10px;}
.spectable tr td table{ margin:0;}
.duospec{ padding:20px 0;}

 <!--产品规格-->
					 <li>
					 	<label>商品规格：</label>
					 	<div class="item radio">
					 		<span><input type="radio" name="spec" @click="spec=0" value="0" {if condition="$v.spec eq 0"}checked="checked"{/if} /> 单规格</span>
					 		<span><input type="radio" name="spec" @click="spec=1" value="1" {if condition="$v.spec eq 1"}checked="checked"{/if} /> 多规格</span>       
					 	</div>
					 	<div class="clear"></div>
					 	<!--单规格-->
					 	<div class="spectable" v-if="spec==0">
								<input type="hidden" name="specjson" v-model="specjson">
					 		<table>
					 			<tr>
					 				<th>售价<i>*</i></th>
					 				<th>成本价</th>
					 				<th>原价<i>*</i></th>
					 				<th>库存<i>*</i></th>
					 				<th>产品编号</th>
					 				<th>重量(KG)</th>
					 				<th>体积(m³)</th>
					 			</tr>
					 			<tr>
					 				<td><input type="number" v-model.trim="specarr[0].price"></td>
					 				<td><input type="number" v-model.trim="specarr[0].costprice"></td>
					 				<td><input type="number" v-model.trim="specarr[0].originalprice"></td>
					 				<td><input type="number" v-model.trim="specarr[0].stock"></td>
					 				<td><input type="number" v-model.trim="specarr[0].code"></td>
					 				<td><input type="number" v-model.trim="specarr[0].weight"></td>
					 				<td><input type="number" v-model.trim="specarr[0].volume"></td>
					 			</tr>
					 		</table>
					 	</div>
					 	<!--多规格-->
					 	<div  class="duospec" v-if="spec==1">					 														
					 		<div class="spectable">
									<input type="hidden" name="speclistjson" v-model="speclistjson">
					 			<table>
					 				<tr>
					 					<th>规格名称</th>
					 					<th>规格属性</th>
					 				</tr>
					 				<tr v-for="(item,index) in specList" :key="index">
					 					<td><input type="text" maxlength="10"  v-model.trim="item.specname"></td>
					 					<td>
					 						<table>
					 							<tr>
					 								<th>属性名称</th>
					 								<th>图片<i>*</i></th>
					 								<th>售价<i>*</i></th>
					 								<th>成本价</th>
					 								<th>原价<i>*</i></th>
					 								<th>库存<i>*</i></th>
					 								<th>产品编号</th>
					 								<th>重量(KG)</th>
					 								<th>体积(m³)</th>
					 								<th width="160">操作</th>
					 							</tr>
					 							<tr v-for="(a,i) in item.attr" :key="i">
					 								<td><input type="text" maxlength="10" v-model.trim="a.attrname"></td>
					 								<td><div class="up"><img :src="a.img" alt=""></div></td>
					 								<td><input type="number" v-model.trim="a.price"></td>
					 								<td><input type="number" v-model.trim="a.costprice"></td>
					 								<td><input type="number" v-model.trim="a.originalprice"></td>
					 								<td><input type="number" v-model.trim="a.stock"></td>
					 								<td><input type="number" v-model.trim="a.code"></td>
					 								<td><input type="number" v-model.trim="a.weight"></td>
					 								<td><input type="number" v-model.trim="a.volume"></td>
					 								<td class="center">
					 									<button type="button" class="btn blue" @click="addattr(index)"><i class="icon-plus-square-o"></i>添加</button>
					 									<button type="button" class="btn red" @click="delattr(index,i)"><i class="icon-trash-o"></i>删除</button>
					 								</td>
					 							</tr>
					 						</table>
					 					</td>
					 				</tr>
					 			</table>
					 			<button type="button" @click="addspec" class="btn blue"><i class="icon-plus-square-o"></i>添加规格</button>
					 		</div>			
					 	</div>				
					 </li>	

JS部分

说明：id 为空的时候是增加，id不为空的时候是编辑，这时候从数据库取出json并转换一下就可以正常显示了。是不是非常的简单，非常适合做后台的，不用去用JQUERY打很多JS代码了。wach 的作用是每次修改表格都会监听变化并转为JSON数据。如果不懂VUE的可以去官网看看，这个挺简单上手快。

<script src="https://lib.baomitu.com/vue/2.6.11/vue.min.js"></script>
<script>
new Vue({
	 el:'#app',
	 data:{
		 id:'',
		 spec:0, //规格类型 0 单规格 1多规格
		 specjson:'',  //单规格JSON
		 speclistjson:'', //多规格JSON
		 specarr:[{price:0,costprice:0,originalprice:0,stock:999,code:'',weight:0,volume:0}], //单规格
		 specList:[{specname:'',attr:[{attrname:'',img:'',price:0,costprice:0,originalprice:0,stock:999,code:'',weight:0,volume:0}]}], //多规格
	 },
	 mounted(){
		 this.spec = "{$v.spec}";
			this.id = "{$v.id}";
		 if(this.spec==0){
		   if(this.id==""){
			 this.specjson = JSON.stringify(this.specarr);
		   }else{
			 this.specjson = '{$v.specjson}';
			 this.specarr =  JSON.parse('{$v.specjson}');
		   }
		 }else{
			if(this.id==""){
			  this.speclistjson =  JSON.stringify(this.specList); 
			}else{
			  this.speclistjson = '{$v.speclistjson}';
			  this.specList = JSON.parse('{$v.speclistjson}');
		    }
		 }
	 },
		watch:{
			 specarr:{
				handler:function(v){
					this.specjson = JSON.stringify(v);
				},
				deep:true
			},
			specList:{
				handler:function(v){
				  this.speclistjson = JSON.stringify(v);
				},
				deep:true
			}
		},
	 methods:{
		 //添加属性
		 addattr(index){
			  let arr = {attrname:'',img:'',price:0,costprice:0,originalprice:0,stock:0,code:'',weight:0,volume:0};
				this.specList[index].attr.push(arr);
		 },
		 //添加规格
		 addspec:function(){
			  let arr = {specname:'',attr:[{attrname:'',img:'',price:0,costprice:0,originalprice:0,stock:0,code:'',weight:0,volume:0}]};
				 this.specList.push(arr);
		 },
		 //删除属性
		 delattr:function(index,i){
			 if(this.specList[index].attr.length==1){
				  this.specList.splice(index,1);
			 }else{
					this.specList[index].attr.splice(i,1);
			 }
		 }
	 }
});
</script>