[Vue篇]vue动态添加行/删除行

vue动态添加行

• • 页面效果
  • 代码：
  • data部分
  • methods部分

页面效果

点击相应的添加后，每个 el-table 增加一行

代码：

                
                  工作/学习经历
                
                
                  
                    
                      
                      
                      <!--  -->
                    
                  
                  
                    
                      
                      
                      <!--  -->
                    
                  
                  
                    
                      
                    
                  
                     
                    
                      保存
                      
                      删除
                      
                      
                                    
                              
                
                
                  新增学习/工作简历
                  
                
              
              
                
                  奖惩情况
                
                
                  
                    
                      
                    
                  
                  
                    
                      
                      
                      <!--  -->
                    
                  
                  
                    
                      
                    
                  
                  
                    
                      
                    
                  
                     
                    
                      保存
                      
                      删除
                                            
                                    
                              
                
                
                  新增奖惩情况
                  
                
              

              
                
                  年度考核
                
                
                  
                    
                      
                      
                      <!--  -->
                    
                  
                  
                    
                      
                    
                  
                  
                    
                      
                    
                              
                     
                    
                      保存
                      
                      删除
                                            
                                    
                              
                
                
                  新增年度考核
                  
                
 

data部分

data() {
    return {
      options:[],
      value:'',
      value1:'',
      month1:'',
      month2:'',
      experienceData: [{
          starttime: '1996-05',
          endtime: '1999-06',
          resume: '就读于xxxx学习xxxx专业',
        }, ],
      bonuspenaltyData:[{
        status:'奖励',
        date:'2022-05',
        num:'123456',
        remarks:'助人为乐'
      }],
      AnnualAssessmentData: [{
        year:'2021',
        result:'合格',
        remarks:'考核通过',
      }],
    };
  },

methods部分

methods: {
    //增加经验行
    handleAddExperienceline() {
      if (this.experienceData == undefined) {
        this.experienceData = new Array();
      }
      let obj = {};
      
      this.experienceData.push(obj);
    },
    //保存经验行
    handlesaveExperience(a, b) {
      console.log(a + b);
    },
    //删除经验行
    handleDeleteExperience(index) {
      console.log(index);
			this.experienceData.splice(index, 1)
    },

    //增加奖惩行
    handleAddBonuspenaltLine() {
      if (this.bonuspenaltyData == undefined) {
        this.bonuspenaltyData = new Array();
      }
      let obj = {};
      
      this.bonuspenaltyData.push(obj);
    },
    //保存奖惩行
    handlesaveBonuspenalt(a, b) {
      console.log(a + b);
    },
    //删除奖惩行
    handleDeleteBonuspenalt(index) {
      console.log(index);
			this.bonuspenaltyData.splice(index, 1)
    },

    //增加年度考核行
    handleAddAnnualAssessmentLine() {
      if (this.AnnualAssessmentData == undefined) {
        this.AnnualAssessmentData = new Array();
      }
      let obj = {};
      
      this.AnnualAssessmentData.push(obj);
    },
    //保存年度考核行
    handlesaveAnnualAssessment(a, b) {
      console.log(a + b);
    },
    //删除年度考核行
    handleDeleteAnnualAssessment(index) {
      console.log(index);
			this.AnnualAssessmentData.splice(index, 1)
    },

  }

注意：

若缺依赖，安装相应依赖。