vue 實現動態表單，點擊新增 增加一行輸入框

功能說明

存在一排必填，點擊增加后會新增一行，點擊每行后面的刪除圖標則會刪除該行，新增按鈕只會出現在最后一行

動態表單部分

data部分

方法

效果

代碼

html

 <el-form ref="form" :rules="formRules" :inline="true" :model="form" label-width="80px">
        <div v-for="(item, index) in form.dynamicItem" :key="index">
          <el-form-item
            label="姓名"
            :prop="'dynamicItem.' + index + '.name'"
            :rules="{
            required: true, message: '姓名不能為空', trigger: 'blur'
        }"
          >
            <el-input v-model="item.name"></el-input>
          </el-form-item>
          <el-form-item
            label="手機號"
            :prop="'dynamicItem.' + index + '.phone'"
            :rules="[
             {required: true, message: '手機號不能為空', trigger: 'blur'},
              { pattern: /^1[34578]\d{9}$/, message: '目前只支持中國大陸的手機號碼' }
          ]"
          >
            <el-input v-model="item.phone"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button v-if="index+1 == form.dynamicItem.length" @click="addItem" type="primary">增加</el-button>
            <el-button v-if="index !== 0" @click="deleteItem(item, index)" type="danger">刪除</el-button>
          </el-form-item>
        </div>
      </el-form>

data

 form: {
        dynamicItem: [
          {
            name: "",
            phone: ""
          }
        ]
      },

方法

 addItem() {
      this.form.dynamicItem.push({
        name: "",
        phone: ""
      });
    },
    sure(form) {
      console.log(this.form.dynamicItem.length, "length");
      this.$refs[form].validate(valid => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    deleteItem(item, index) {
      this.form.dynamicItem.splice(index, 1);
      console.log(this.form.dynamicItem, "刪除");
    },