VUE-element简单的动态增减表单项

大致效果图

 

 

 首先在创建一个实例来存放成员列表；

data () {
    return {
      dataForm: {
        listRelation: []
      }
    }
  }

列表样式；

<div style="width:100%;background:#E4E7ED;">
  <div style="width:92%">
    <el-row>
      <el-col v-for="item in 8" :key="item" :span="3">
        <div class="familyInfo-head">姓名</div>
      </el-col>
    </el-row>
  </div>
  <el-form :model="dataForm.listRelation" label-width="0" class="demo-dynamic">
　　 <div v-for="(item, index) in dataForm.listRelation" :key="index" style="width:100%;display:flex;">
　　   <el-row :gutter="5">
　　　　  <el-col v-for="item in 8" :key = "item" :span="3">
 　　　　　  <el-form-item label-width="0" :prop="'listRelation.' + index + '.name'" :rules="{ required: true, message: '姓名不能为空', trigger: 'blur' }">
　　　　　　　  <el-input v-model="dataForm.listRelation[index].name" placeholder="姓名"></el-input>
　　　　　   </el-form-item>
         </el-col>
　　   </el-row>
　　　 <el-button @click="delfamilyInfo(index)" style="margin-left:10px;background:#F56C6C;color:#FFFFFF;">删除</el-button>
　　 </div>
  </el-form>
</div>

调用方法：

addfamilyInfo () {
    this.dataForm.listRelation.push({})
}
delfamilyInfo (index) {
    this.dataForm.listRelation.splice(index, 1)
}

注：这只是简化的代码，仅作参考，如需使用还需更改调整。

 

 

 

v-for="(item, index)  in dataForm.listRelation"