vue动态添加删除行-vue动态添加删除DOM元素

效果:

vue动态添加删除行

HTML:

    
      
        

          
报告案例分析表
            

                

                    
项目基本信息
                    

                        

                            

                                
项目领域
                                
开展年份
                                
项目名称
                                
委托单位
                                
主管部门
                                
项目单位
                                
资金类型
                                
评价类型
                                
报告类型
                                
质量品质
                                
级别
                            
                            

                                
项目领域
                                
开展年份
                                
项目名称
                                
委托单位
                                
主管部门
                                
项目单位
                                
资金类型
                                
评价类型
                                
报告类型
                                
质量品质
                                
级别
                            
                           
                        
                    
                
                

                    
取得成就
                    
取得成就

                
                 

                    
整体结论
                    
整体结论
                
                

                    
问题和建议
                    

                        

                            

                                
问题
                                
建议
                                
操作
                            
                            

                                
一级问题分类
                                
二级问题分类
                                
三级问题分类
                                
问题内容
                            
                            

                               

                                  

                                    
                                  
                                  

                                    
                                  
                                  

                                    
                                  
                                  

                                    
                                  
                                  

                                    
                                  
                                  

                                    
                                  
                              
                              

                                  

                                     
                                  
                                  

                                    
                                  
                                  

                                    
                                  
                                  

                                    
                                  
                                  

                                    
                                  
                                  

                                    
                                  
                              
                            
                        
                    
                
                

                    
指标分析
                    

                        

                            

                                
指标分类
                                
指标描述
                                
操作
                            
                            

                                
一级指标名称
                                
二级指标名称
                                
三级指标名称
                                
四级指标名称
                                
涉标及一级问题
                                
涉标及二级问题
                                
涉标及三级问题
                                
指标描述
                            
                            

                              

                                
一级指标名称
                                
二级指标名称
                                
三级指标名称
                                
四级指标名称
                                
涉标及一级问题
                                
涉标及二级问题
                                
涉标及三级问题
                                
指标描述
                                

                                   
                                   
                                
                            
                            
                          
                        
                    
                
            
        
      
      

        确 定
        取 消
      

js:

data: {
		temp: {
			params: [
				// 默认存在的输入框(+) 
				{
					key: '',
					key1: '',
                    key2: '',
                    key3: '',
                    key4: '',
				},
				// 手动添加的输入框(-) 
				// ... 
			]
		},
		// 总共添加了多少个 
		ParamsNum: 0
	},
	methods: {
		/** * 添加项目 * 追加数据且总数+1 * @return void */
    queRowAdd: function() {
      this.temp.params.push({
        key: "",
        key1: "",
        key2: "",
        key3: "",
        key4: ""
      });
      this.ParamsNum++;
    },
    /** * 移除项目 * 移除数据且总数-1 * @param {Number} num - 索引值 * @return void */
    queRowDelete: function(num) {
      this.temp.params.splice(num, 1);
      this.ParamsNum--;
    }
	}

CSS: