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;//对象是引用类型,可以直接比较地址,剔除数组中的选中的那个
        })
    }