问题描述:在ef-form-item中包裹了一个自定义的组件,是定prop 进行校验,trigger是blur的是可以触发的,当是change的没有触发校验。 原因: 查看el-input的源码后发现,el-input中,当值发生变化后,会调用el-form-item的validate方法去校验。 el-input.png 自己组件的实现,实现后也可以在自己的组件中使用change的校验...
非el的输入组件,值变化时不会触发el-from-item的重新校验,需要手动触发el.form.change事件 watch: { 'form.mfExchangeDays'() { this. emit('el.form.change') // 非el的输入组件,值变化时不会触发el-from-item的重新校验,需要手动触发el.form.change事件 } },...
<el-form-item :label="item.label+':'":prop="item.status":rules="rulesItemStatus"> <el-select v-model="stockForm[item.status]"class="item-placeholder"placeholder="请选择"clearable @change="val => setParamStatusListChange(val, index)" // 回调函数可以带多些需要的参数 > <el-option v-fo...
11. 单选框,多选框,日期框,选择框的校验时机都应该指定为change,符合业务场景 12. 动态添加或删除form表单的组件,需要动态配置好label,prop,rule的数据,删除按钮需要注意代码let index = array.indexOf(item)和array.splice(index,1) 13. 重置按钮:this.$refs['refName'].resetFields();,清空了校验,表单数据也...
el-select @change事件获取整个对象 <el-form-item label="使用人"prop="useBy"> <el-selectref="useByRef"v-model="form.useBy"filterable placeholder="请输入员工名称"style="width: 100%"no-match-text="请输入员工名称"> <el-option v-for="item in userList":key="item.userId":label="item....
</el-form-item> 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 那由此我们可以设计出封装后样子: <el-form-item label="label" prop="prop"> // 如果是input类型 <el-input v-if="input" v-model="ruleForm.name"></el-input> ...
/deep/ .el-form-item__label { font-size: 18px; color: blue; } } } </style> 只修改content <style lang="less" scoped> .el-form { .el-form-item { /deep/ .el-form-item__content { * { font-size: 18px; color: blue;
:prop="item.status":rules="rulesItemStatus"> <el-select v-model="stockForm[item.status]"class="item-placeholder"placeholder="请选择"clearable @change="val => setParamStatusListChange(val, index)" // 回调函数可以带多些需要的参数 > <el-option v-for="ite in setParamStatusList":key="ite....
当el-form 里边只有一个el-form-item的时候,输入内容回车刷新整个页面。 代码语言:javascript 复制 <el-form:model="queryParams"ref="queryRef"><el-form-item label="文章类型"prop="typeName"><el-input v-model="queryParams.typeName"placeholder="请输入文章类型名称"clearable ...
</el-form-item> </el-form> </div> <script> new Vue({ el: '#app', data() { return { numberValidateForm: {}, rules: { name: [ { required: true, message: '姓名不能为空', trigger: "change" }, ], age: [ { required: true, message: '年龄不能为空', trigger: "change" }...