动态添加表单数据vue

原创已于 2022-03-11 17:09:08 修改 · 2.3k 阅读

CC 4.0 BY-SA版权

文章标签：

于 2022-02-11 15:57:25 首次发布

一、第一种
  <el-row>
        <el-col :span="18">
        <el-form-item label="研究方向" 
        :prop="'list.'+index+'.name'"
        :rules="{required:true,message:'研究方向不能为空',trigger:'blur'}">
        <el-input v-model="item.name" placeholder="请输入研究方向" />
        </el-form-item>
        </el-col>
         <el-col :span="6" >
         <el-button style="margin-left:5px" v-if="index+1==form.list.length" type="primary" @click="addItem">增加</el-button>
        <el-button style="margin-left:5px" v-if="index !==0" type="danger" @click="deleteItem(item,index)">删除</el-button>
        </el-col>
    </el-row>

第二种、
    <div v-for="(item, index) in form.list" :key="index">
    <el-row>
        <el-col :span="18">
        <el-form-item label="研究方向" 
        :prop="'list.'+index+'.name'"
        :rules="{required:true,message:'研究方向不能为空',trigger:'blur'}">
        <el-input v-model="item.name" placeholder="请输入研究方向" />
        </el-form-item>
        </el-col>
         <el-col :span="6" >
         <el-button style="margin-left:5px"  type="primary" @click="addItem">增加</el-button>
        <el-button style="margin-left:5px" v-if="form.list.length>1" type="danger" @click="deleteItem(item,index)">删除</el-button>
        </el-col>
    </el-row>
        </div>

form:{
  list:[
           {
            name:""
           }
       ]
       }

data数据里加上

 form: {
        id:"",
        audit:"",
        zw:"",
        list:[
            {name:""}
        ]
      },

增加按钮方法addItem

    addItem() {
       var obj={name:""}
    this.form.list.push(JSON.parse(JSON.stringify(obj)))
    },

    第二种、
addItem() {
    this.form.list.push({
        name: "",
      });
    },

删除方法

  deleteItem(item, index) {
      this.form.list.splice(index, 1);
    },