vue中删除v-for

二话不说直接上代码：

        <div>
          <el-card class="box-card" shadow='nevner'>
            <div slot="header" class="clearfix">
              <div class="card-right-wrap">
                <el-button @click="saveForm" type="primary" size="medium" :loading="loadingStatus">保存</el-button>
              </div>
              <div class="card-title">团队成员</div>
            </div>
            <!-- 循环表单 -->
            <div v-for="(formItem,index) in formArry" :key="index" class="form-item">
              <el-form class="form clearfix" size="small" :label-position="labelPosition" label-width="130px"
                       :model="formItem" ref="form">
                <el-row>
                  <el-col :offset="1" :span="10">
                    <el-form-item label="职务:">
                      <el-input v-model="formItem.zw"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :offset="1" :span="10">
                    <el-form-item label="是否参与日常运营:">
                      <el-select v-model="formItem.sfcyrcyy" placeholder="请选择" style="width:100%">
                        <el-option label="参与" value="1"></el-option>
                        <el-option label="不参与" value="0"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
              <el-button type="default" size="medium" @click="deleteItem(index,formItem)">删除</el-button>
<el-button type="default" size="medium" @click="deleteByID(formItem)">删除</el-button>
            </div>
            <v-formAddBtn v-on:addForm="addForm"></v-formAddBtn>
          </el-card>
        </div>

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

methods: {
       //增加表单
      addForm() {
        let newData = JSON.parse(JSON.stringify(this.formArryObj));
        for (let key in newData) {
          newData[key] = null;
        }
        this.formArry.push(newData);
      },
      deleteItem:function(index,formItem){
        console.log(index)
        console.log(formItem)
        this.formArry.splice(index,1);
        // this.formArry_bf.splice(index,1);
        if(formItem.id != null){
        this.formArry_del.push(formItem);
        }
      },
      deleteByID(formItem) {
      // this.formArry.splice(this.formArry.find( formItem => {
      //   return formItem.id === formItem.id;
      // }), 1);
      this.formArry_del.push(formItem.id);
      console.log(formItem)
       //这里的formArry_del是数组
    },

}

</div>

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

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

猜你喜欢