526互联

element-plus之form表单场景大全

发布时间 2023-11-29 09:03:57作者: 影思密达ing

1.:validate-event="false"的作用是，当前这个表单change或者blur的时候不进行表单校验，只有提交按钮验证时候才校验标红框,

场景运用：当切换其他tab也好，根据select1选的值，然后给select2赋值，结果没查到select2为空数组时候自动标红，类似这种不想要红的可以处理

<el-select
                            style="width: 100%"
                            v-model="props.row.dutyOwnerId"
                            filterable
                            clearable
                            :validate-event="false"
                            fit-input-width
                            @change="dutyOwnerChange"
                            :disabled="dutyOwnerIdDisabled || props.operate == 'detail' || props.row.feedbackStatus == 3"
                            placeholder="请选择"
                        >
                            <el-option
                                v-for="item in dutyOwnerOptions"
                                :key="item.id"
                                :label="`${item.nickName} ${item.userName} ${item.userCode ?? '--'}`"
                                :value="item.id"
                            />
                        </el-select>

2.:validate-on-rule-change="false" 是给form用的, -是否在 rules 属性改变后立即触发一次验证

应用场景，tab选项卡，切换不同的底下有不同的form，有时候会动态改变rule，或者进入编辑页面，直接标红类似场景

类似https://blog.csdn.net/fukua007/article/details/132568510

https://blog.csdn.net/qq_38425020/article/details/128779662

<el-form
                        ref="regFormRef"
                        :model="regForm"
                        :rules="regFormRules"
                        :validate-on-rule-change="false"