需求:表单可以动态添加,如果添加了,里面的表单项需要校验。如图:
主要是下面那个红字要在失去焦点和提交前触发,
前面的红星只要添加了rules就能出现。
1、这里的写法有点不一样所以记录一下。
<el-row style="display: flex;padding: 0 20px;align-items: center;justify-content: flex-start">
<h4 style="flex: 1;text-align: left">外链配置</h4>
<el-button @click="onClickAdd"><i class="el-icon-plus" style="color: #1482f0"> </i>
</el-button>
</el-row>
<ul v-if="form.external_link_conf && form.external_link_conf.length">
<li v-for="(item,index) in form.external_link_conf" :key="index" style="display: flex">
<el-form-item :prop="`external_link_conf[${index}].title`"
:rules="[{ required: true, message: '标题不能为空'}]"
label="标题:">
<el-input
v-model="item.title"
placeholder="请输入标题"
type="text"
/>
</el-form-item>
<el-form-item :prop="form.external_link_conf[index].url"
:rules="[{ required: true, message: '按钮样式不能为空' }]"
label="url:">
<el-input
v-model="form.external_link_conf[index].url"
placeholder="请输入url"
type="text"
/>
</el-form-item>
<el-form-item>
<el-button @click="onClickDelete(index)"><i class="el-icon-delete" style="color: #1482f0"> </i>
</el-button>
</el-form-item>
</li>
</ul>
2、相关js函数:
onClickAdd() {
if (this.form.external_link_conf) {
this.form.external_link_conf.push({title: null, url: null})
} else {
this.form.external_link_conf =
this.$set(this.form, 'external_link_conf', [{title: null, url: null}])
}
},
onClickDelete(index) {
this.form.external_link_conf.splice(index)
},
主要是上面的html代码form-item的属性绑定用字符串的形式不要加form,v-model就是item直接绑定