点击按钮新增一行input文本框

123 阅读1分钟
    <el-row>
                  <template v-for="(domain, index) in form.contactRelates">
                    <el-col :span="8">
                      <el-form-item
                        :label="'其他联系人' + (index + 1)"
                        :prop="'contactRelates.' + index + '.contactPerson'"
                        :rules="{
                          required: true,
                          message: '不能为空',
                          trigger: 'blur',
                        }"
                      >
                        <el-input v-model="domain.contactPerson" />
                      </el-form-item>
                    </el-col>

                    <el-col :span="7">
                      <el-form-item
                        :label="'联系电话' + (index + 1)"
                        :prop="'contactRelates.' + index + '.contactTelNumber'"
                        :rules="{
                          required: true,
                          message: '不能为空',
                          trigger: 'blur',
                        }"
                      >
                        <el-input v-model="domain.contactTelNumber" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="7">
                      <el-form-item
                        :label="'职务' + (index + 1)"
                        :prop="'contactRelates.' + index + '.contactPost'"
                        :rules="{
                          required: true,
                          message: '不能为空',
                          trigger: 'blur',
                        }"
                      >
                        <el-input v-model="domain.contactPost" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="2">
                      <el-button
                        type="danger"
                        icon="Delete"
                        circle
                        class="fr"
                        @click="removeDomainContact(domain)"
                      />
                    </el-col>
                  </template>
                  <el-col :span="24">
                    <el-form-item>
                      <el-button @click="addDomainContact">新增联系人</el-button>
                    </el-form-item>
                  </el-col>
                </el-row>
                
                
                // 添加其他联系人
            function addDomainContact() {
              form.value.contactRelates.push({
                contactPerson: "",
                contactTelNumber: "",
                contactPost: "",
                type: "2",
                  });
                }
                const removeDomainContact = (item) => {
                  const index = form.value.contactRelates.indexOf(item);
                  if (index !== -1) {
                    form.value.contactRelates.splice(index, 1);
                  }
                };
                

image.png