使用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;}

 
					 

					 	商品规格：
					 	

					 		 单规格
					 		 多规格       
					 	
					 	

					 	
					 	

								
					 		

					 			

					 				
售价*
					 				
成本价
					 				
原价*
					 				
库存*
					 				
产品编号
					 				
重量(KG)
					 				
体积(m³)
					 			
					 			

					 				

					 				

					 				

					 				

					 				

					 				

					 				

					 			
					 		
					 	
					 	
					 	
					 														
					 		

									
					 			

					 				

					 					
规格名称
					 					
规格属性
					 				
					 				

					 					

					 					

					 						

					 							

					 								
属性名称
					 								
图片*
					 								
售价*
					 								
成本价
					 								
原价*
					 								
库存*
					 								
产品编号
					 								
重量(KG)
					 								
体积(m³)
					 								
操作
					 							
					 							

					 								

					 								

					 								

					 								

					 								

					 								

					 								

					 								

					 								

					 								

					 									添加
					 									删除
					 								
					 							
					 						
					 					
					 				
					 			
					 			添加规格
					 		
			
					 	
				
					 
	

JS部分

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