点击添加按钮: 最多添加5个
注意:
不只可以el-form 进行校验,也可以对单个el-form-item 进行校验
vue elementUI form组件动态添加el-form-item并且动态添加rules必填项校验方法-CSDN博客
el-form 里边有el-form-item ,el-form-item里边有新的校验
可以对el-form-item 进行单个的校验
<el-form-item label="展示标签:" :prop="EFormPropKeys.TAGS">
<div class="display-label">
<el-link
v-if="!disabledForm" :icon="Plus" :underline="false" type="primary"
v-throttle:click="{ time: 500, handler: handleAddTag }"
>添加标签</el-link
>
<div v-if="createForm[EFormPropKeys.TAGS].length > 0" class="tag-list">
<div
v-for="(item, index) in createForm[EFormPropKeys.TAGS]"
:key="index"
class="tag-item"
>
<el-form-item
label="标签名称"
label-width="82px"
:prop="`${EFormPropKeys.TAGS}.${index}.labelName`"
:rules="tagRules.labelName"
>
<el-input v-model="item.labelName" maxlength="10" />
</el-form-item>
<el-form-item
label="颜色"
label-width="60px"
required
:prop="`${EFormPropKeys.TAGS}.${index}.colorCode`"
:rules="tagRules.colorCode"
>
<el-color-picker v-model="item.colorCode" show-alpha />
<el-icon class="delete-icon" v-if="!disabledForm" @click="removeTag(index)"
><Delete
/></el-icon>
</el-form-item>
</div>
</div>
</div>
</el-form-item>
/**
* 添加标签
*/
const handleAddTag = () => {
if (createForm[EFormPropKeys.TAGS].length >= 5) {
ElMessage.warning("最多添加5个标签")
return
}
createForm[EFormPropKeys.TAGS]?.push({
labelName: "",
colorCode: ""
})
}
const createForm = reactive({
[EFormPropKeys.NAME]: "",
[EFormPropKeys.TAGS]: [],
})
const tagRules = reactive({
labelName: [{ required: true, message: "请输入标签名称", trigger: "blur" }],
colorCode: [{ required: true, message: "请选择颜色", trigger: "blur" }]
})