<el-form
:model="noticForm"
ref="noticForm"
label-width="70px"
:inline="true"
>
<el-row>
<el-col :span="10">
<el-form-item
v-for="(nameItem, index) in noticForm.noticConfig.name"
:key="nameItem.key"
:prop="'noticConfig.name.' + index + '.value'"
label="姓名:"
:rules="rules.name"
>
<el-input v-model="nameItem.value"></el-input>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item
prop="phone"
label="电话:"
v-for="(phoneItem, index) in noticForm.noticConfig.phone"
:key="phoneItem.key"
:prop="'noticConfig.phone.' + index + '.value'"
:rules="rules.phone"
>
<el-input v-model="phoneItem.value"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item
prop="hospitalId"
label="医院:"
v-for="(hospitalIdItem, index) in noticForm.hospitalId"
:key="hospitalIdItem.key"
:prop="'hospitalId.' + index + '.value'"
:class="{ active: !hospitalIdItem.show }"
// 动态校验
:rules="[{ required: hospitalIdItem.show, message: '请选择医院', trigger: 'change' }]"
>
<el-select
v-model="hospitalIdItem.value"
placeholder="请选择医院"
>
<el-option
v-for="(item, index) in hospitalRange"
:key="index"
:label="item.hospitalName"
:value="item.id"
>
</el-option>
</el-select>
</el-form-item>
</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-button @click.prevent="removeDomain">删除</el-button>
</el-form-item>
</el-form>
//data
noticForm: {
noticConfig: {
name: [
{
value: "",
},
],
phone: [
{
value: "",
},
],
},
},
rules: {
phone: [{ required: true, message: "必填", trigger: "blur" }],
name: [{ required: true, message: "必填", trigger: "blur" }],
},
// 删除
removeDomain() {
// console.log(this.noticForm.noticConfig.phone);
// console.log(this.noticForm.noticConfig.name);
if (this.noticForm.noticConfig.name.length > 1) {
this.noticForm.noticConfig.phone.splice(-1, 1);
this.noticForm.noticConfig.name.splice(-1, 1);
} else {
this.$message({
message: "已经是最后一项了,不能删除了",
type: "error",
});
}
},
// 表单新增
addDomain() {
this.noticForm.noticConfig.name.push({
value: "",
key: Date.now(),
});
this.noticForm.noticConfig.phone.push({
value: "",
key: Date.now(),
});
},
element form表单动态添加新增一行加校验
于 2022-12-02 17:09:35 首次发布