element form表单动态添加新增一行

最新推荐文章于 2024-09-13 09:46:13 发布

不完美女孩-

最新推荐文章于 2024-09-13 09:46:13 发布

阅读量2.8k

点赞数

文章标签： javascript elementui 前端

本文链接：https://blog.csdn.net/LJJONESEED/article/details/128148287

版权

<el-form
   :model="noticForm"
   ref="noticForm"
   label-width="70px"
   :inline="true"
 >
   <el-row
     v-for="(noticItem, index) in noticForm.noticConfig"
     :key="index"
   >
     <el-col
       :span="10"
       v-for="(nameItem, index) in noticItem.name"
       :key="nameItem.key"
     >
       <el-form-item prop="name" label="姓名：">
         <el-input v-model="nameItem.value"></el-input>
       </el-form-item>
     </el-col>
     <el-col
       :span="10"
       v-for="(phoneItem, index) in noticItem.phone"
       :key="phoneItem.key"
     >
       <el-form-item prop="phone" label="电话：">
         <el-input v-model="phoneItem.value"></el-input>
       </el-form-item>
     </el-col>
     <el-col :span="4"
       ><el-button @click.prevent="removeDomain(noticItem)"
         >删除</el-button
       >
     </el-col>
   </el-row>
   <el-form-item style="width: 100%; text-align: center">
     <el-button type="primary" @click="submitForm('noticForm')"
       >提交</el-button
     >
     <el-button @click="addDomain">新增</el-button>
   </el-form-item>
 </el-form>




//data
noticForm: {
 noticConfig: [
     {
       name: [
         {
           value: "",
         },
       ],
       phone: [
         {
           value: "",
         },
       ],
     },
   ],
 },

// 新增
removeDomain(item) {
 var index = this.noticForm.noticConfig.indexOf(item);
  if (index == "0") {
    // 还有一个的时候提示不能删除
    this.$message({
      message: "不能删除了",
      type: "error",
    });
    return false;
  }
  if (index !== -1 && index !== "0") {
    this.noticForm.noticConfig.splice(index, 1);
  }
},
// 表单新增
addDomain() {
  this.noticForm.noticConfig.push({
    name: [
      {
        value: "",
        key: Date.now(),
      },
    ],
    phone: [
      {
        value: "",
        key: Date.now() + "2",
      },
    ],
  });
},