vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue动态添加行删除行

vue动态添加行/删除行的完整代码示例

作者:逸佳6

在开发中我们常常会碰到这种业务,有一些数据需要在前端进行删除,这篇文章主要给大家介绍了关于vue动态添加行/删除行的相关资料,需要的朋友可以参考下

页面效果

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

代码:

<el-card>
                <div class="titleitem">
                  <span >工作/学习经历</span>
                </div>
                <el-table
                  :data="experienceData"
                  stripe
                  style="width: 100%">
                  <el-table-column
                    prop="starttime"
                    label="开始时间"
                    width="260">
                    <template slot-scope="scope">
                      <el-date-picker
                        type="month"
                        size="small"
                        placeholder="选择年月"
                        v-model="scope.row.starttime">
                      </el-date-picker>
                      <!-- <el-input></el-input> -->
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="endtime"
                    label="结束时间"
                    width="260">
                    <template slot-scope="scope">
                      <el-date-picker
                        type="month"
                        size="small"
                        placeholder="选择年月"
                        v-model="scope.row.endtime">
                      </el-date-picker>
                      <!-- <el-input v-model="scope.row.endtime"></el-input> -->
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="resume"
                    label="简历"
                    width="380">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.resume"></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="operate"
                    label="操作">   
                    <template slot-scope="scope">
                      <el-button 
                        size="mini" 
                        type="success" 
                        icon="el-icon-save" 
                        @click="handlesaveExperience(scope.$index, scope.row)">保存
                      </el-button>
                      <el-button 
                        size="mini" 
                        type="danger" 
                        icon="el-icon-delete" 
                        @click="handleDeleteExperience(scope.$index, scope.row)">删除
                      </el-button>
                      
                    </template>                
                  </el-table-column>            
                </el-table>
                <div>
                  <el-button 
                    type="primary" 
                    icon="el-icon-plus" 
                    size="mini" 
                    @click="handleAddExperienceline">新增学习/工作简历
                  </el-button>
                </div>
              </el-card>
              <el-card>
                <div class="titleitem">
                  <span >奖惩情况</span>
                </div>
                <el-table
                  :data="bonuspenaltyData"
                  stripe
                  style="width: 100%">
                  <el-table-column
                    prop="status"
                    label="奖励/惩罚"
                    width="100">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.status"></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="date"
                    label="奖惩年月"
                    width="260">
                    <template slot-scope="scope">
                      <el-date-picker
                        type="month"
                        size="small"
                        placeholder="选择年月"
                        v-model="scope.row.date">
                      </el-date-picker>
                      <!-- <el-input></el-input> -->
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="num"
                    label="奖惩文号"
                    width="180">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.num"></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="remarks"
                    label="备注"
                    width="360">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.remarks"></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="operate"
                    label="操作">   
                    <template slot-scope="scope">
                      <el-button 
                        size="mini" 
                        type="success" 
                        icon="el-icon-save" 
                        @click="handlesaveBonuspenalt(scope.$index, scope.row)">保存
                      </el-button>
                      <el-button 
                        size="mini" 
                        type="danger" 
                        icon="el-icon-delete" 
                        @click="handleDeleteBonuspenalt(scope.$index, scope.row)">删除
                      </el-button>                      
                    </template>                
                  </el-table-column>            
                </el-table>
                <div>
                  <el-button 
                    type="primary" 
                    icon="el-icon-plus" 
                    size="mini" 
                    @click="handleAddBonuspenaltLine">新增奖惩情况
                  </el-button>
                </div>
              </el-card>

              <el-card>
                <div class="titleitem">
                  <span >年度考核</span>
                </div>
                <el-table
                  :data="AnnualAssessmentData"
                  stripe
                  style="width: 100%">
                  <el-table-column
                    prop="year"
                    label="年度"
                    width="260">
                    <template slot-scope="scope">
                      <el-date-picker
                        type="year"
                        size="small"
                        placeholder="选择年"
                        v-model="scope.row.year">
                      </el-date-picker>
                      <!-- <el-input v-model="scope.row.year"></el-input> -->
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="result"
                    label="结果"
                    width="260">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.result"></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="remarks"
                    label="备注"
                    width="380">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.remarks"></el-input>
                    </template>
                  </el-table-column>            
                  <el-table-column
                    prop="operate"
                    label="操作">   
                    <template slot-scope="scope">
                      <el-button 
                        size="mini" 
                        type="success" 
                        icon="el-icon-save" 
                        @click="handlesaveAnnualAssessment(scope.$index, scope.row)">保存
                      </el-button>
                      <el-button 
                        size="mini" 
                        type="danger" 
                        icon="el-icon-delete" 
                        @click="handleDeleteAnnualAssessment(scope.$index, scope.row)">删除
                      </el-button>                      
                    </template>                
                  </el-table-column>            
                </el-table>
                <div>
                  <el-button 
                    type="primary" 
                    icon="el-icon-plus" 
                    size="mini" 
                    @click="handleAddAnnualAssessmentLine">新增年度考核
                  </el-button>
                </div>
 </el-card>

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)
    },

  }

注意:

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

总结

到此这篇关于vue动态添加行/删除行的文章就介绍到这了,更多相关vue动态添加行删除行内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文