当前位置:   article > 正文

vue中删除v-for_v-for 删除第一个

v-for 删除第一个

二话不说直接上代码:

  1. <div>
  2. <el-card class="box-card" shadow='nevner'>
  3. <div slot="header" class="clearfix">
  4. <div class="card-right-wrap">
  5. <el-button @click="saveForm" type="primary" size="medium" :loading="loadingStatus">保存</el-button>
  6. </div>
  7. <div class="card-title">团队成员</div>
  8. </div>
  9. <!-- 循环表单 -->
  10. <div v-for="(formItem,index) in formArry" :key="index" class="form-item">
  11. <el-form class="form clearfix" size="small" :label-position="labelPosition" label-width="130px"
  12. :model="formItem" ref="form">
  13. <el-row>
  14. <el-col :offset="1" :span="10">
  15. <el-form-item label="职务:">
  16. <el-input v-model="formItem.zw"></el-input>
  17. </el-form-item>
  18. </el-col>
  19. <el-col :offset="1" :span="10">
  20. <el-form-item label="是否参与日常运营:">
  21. <el-select v-model="formItem.sfcyrcyy" placeholder="请选择" style="width:100%">
  22. <el-option label="参与" value="1"></el-option>
  23. <el-option label="不参与" value="0"></el-option>
  24. </el-select>
  25. </el-form-item>
  26. </el-col>
  27. </el-row>
  28. </el-form>
  29. <el-button type="default" size="medium" @click="deleteItem(index,formItem)">删除</el-button>
  30. <el-button type="default" size="medium" @click="deleteByID(formItem)">删除</el-button>
  31. </div>
  32. <v-formAddBtn v-on:addForm="addForm"></v-formAddBtn>
  33. </el-card>
  34. </div>

上面是个循环表单,下面删除

  1. methods: {
  2. //增加表单
  3. addForm() {
  4. let newData = JSON.parse(JSON.stringify(this.formArryObj));
  5. for (let key in newData) {
  6. newData[key] = null;
  7. }
  8. this.formArry.push(newData);
  9. },
  10. deleteItem:function(index,formItem){
  11. console.log(index)
  12. console.log(formItem)
  13. this.formArry.splice(index,1);
  14. // this.formArry_bf.splice(index,1);
  15. if(formItem.id != null){
  16. this.formArry_del.push(formItem);
  17. }
  18. },
  19. deleteByID(formItem) {
  20. // this.formArry.splice(this.formArry.find( formItem => {
  21. // return formItem.id === formItem.id;
  22. // }), 1);
  23. this.formArry_del.push(formItem.id);
  24. console.log(formItem)
  25. //这里的formArry_del是数组
  26. },
  27. }

 <div v-for="(formItem,index) in formArry" :key="index" class="form-item">

</div>

formItem这个里面是数组对象,删除的时候要将这个放到formArry_del删除数组中,传到后端的是一个数组对面,去做逻辑删除。

如果后端不是要数组 传id过的去话就用formItem.id传过去。这个this.formArry.splice(index,1);是删除循环数组下标

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Monodyee/article/detail/76758
推荐阅读
相关标签
  

闽ICP备14008679号