vue如何动态增加表单,点击增加,多一行,并且可以删除。

image.png

这里的数据是这样来的!
image.png

之前写过类似的是可以增加删除的,因为没有那么层。这个数据复杂起来我就不行了。在线求助各位大佬

-------------------------分隔线---------------------------------------------
问题已经解决,因为我在同个页面其他地方也用得到这个方法,所以我直接写了个公用增加删除方法。

//这里的item.link 是 form2.honor.link
<el-table :data="item.link" style="width: 100%">
  <el-table-column align="center" label="友情链接" width="250">
    <template slot-scope="scope">
      <el-input
      v-model="scope.row.name"
      size="mini"
      placeholder="友情链接"
      style="width: 100%;"
      autocomplete="off"
    ></el-input>
    </template>
  </el-table-column>

  <el-table-column align="center" label="网址">
    <template slot-scope="scope">
      <el-input
      v-model="scope.row.url"
      size="mini"
      placeholder="网址"
      style="width: 100%;"
      autocomplete="off"
    ></el-input>
    </template>
  </el-table-column>

  <el-table-column align="center" label="操作" fixed="right">
    <template slot-scope="scope">
      <el-button size="mini" @click="delArrt({to:'form2',index:index,name:'honor',key:'link',vindex:scope.$index})">-</el-button>
    </template>
  </el-table-column>
</el-table>```

<el-button
  size="mini"
  @click="addArrt({to:'form2',index:index,name:'honor',key:'link',value:{name: '',url:'',old_flower:false}})"
>+</el-button>
//添加
addArrt(data) {
  if (!this[data.to][data.name][data.index][data.key]) {
    Vue.set(this[data.to][data.name][data.index], data.key, []);
  }
  console.log(this[data.to][data.name][data.index][data.key])
  Vue.set(
    this[data.to][data.name][data.index][data.key],
    this[data.to][data.name][data.index][data.key].length,
    data.value
  );
  console.log(this[data.to][data.name][data.index][data.key])
},

//删除
delArrt(data) {
  Vue.delete(this[data.to][data.name][data.index][data.key], data.vindex);
},
```

记得 `
import Vue from 'vue';

阅读 178
评论
    5 个回答
    //添加:
    add(){
        this.form2.honor.link.push({...})
    }
    
    
    //渲染
    <div v-for='item in form2.honor.link' @click='delete(item)'>
    
    //删除
    delete(item){
        this.form2.honor.link = this.form2.honor.link.filter(val => {
            return val != item;//对象是引用类型,可以直接比较地址,剔除数组中的选中的那个
        })
    }
    
      • 767

      你这个描述不知道该如何下手,建议你做一个 demo 用 codepen 放出来,以便给你解决。
      一般就是直接找到数据删除掉就好了

        点击加就push({data}) 点击减就 splice(index,1) 在减号按钮上绑定个 @click="minus(index)" 就可以啦,如果你这些都不懂那就有点难搞哦!建议去看看基础实战视频先。

          你需要了解一下vue.$set这个方法,一般都是处理这种数据变化,视图没变化的

              撰写回答

              登录后参与交流、获取后续更新提醒