网站怎样做推广,工程技术研究中心网站建设要求,软件设计师考什么,用rp怎样做网站1.同一个addForm表单#xff0c;同样的验证规则#xff0c;有的输入框在没填写时能够显示红色#xff0c;有的却毫无反应
解决方案#xff1a;去elementUI官网看了一下验证表单的规则及属性#xff0c;第一句就写 Form 组件提供了表单验证的功能#xff0c;只需要通过 r…1.同一个addForm表单同样的验证规则有的输入框在没填写时能够显示红色有的却毫无反应
解决方案去elementUI官网看了一下验证表单的规则及属性第一句就写 Form 组件提供了表单验证的功能只需要通过 rules 属性传入约定的验证规则并将 Form-Item 的 prop 属性设置为需校验的字段名即可。校验规则参见 async-validator 关键在prop这个属性表单域没写prop属性像是我能干出来的事每次隔很久不干活就会忘记一些属性的作用老想删除 见不得一点冗余代码bushi
el-form :modeladdForm :rulesrules refaddForm label-width85pxel-form-item label值班辖区: propdutyAreael-selectstylewidth: 60%clearablev-modeladdForm.dutyAreaplaceholder请选择值班辖区el-optionv-fordict in dict.type.maintain_fault_area:labeldict.label:valuedict.value/el-option/el-select/el-form-itemel-form-item label值班人员 propdutyPersonNameel-select v-modeladdForm.dutyPersonName filterable placeholder请选择值班人员 stylewidth: 60% changehandchange($event)el-optionv-for item in dutyUserList:labelitem.nickName:value{personName:item.nickName,personId:item.userId}/el-option/el-select/el-form-itemel-form-item label值班时间 propdutyTimeel-input v-modeladdForm.dutyTime stylewidth: 60% :disabledtrue/el-input/el-form-itemel-form-item label是否备班: propprepareClassel-selectstylewidth: 60%clearablev-modeladdForm.prepareClassplaceholder请选择备班状态el-optionv-fordict in dict.type.maintain_fault_prepare_class:labeldict.label:valuedict.value/el-option/el-select/el-form-item/el-formdiv classdemo-drawer__footerel-button clickhandleClose取 消/el-buttonel-button typeprimary clicksubmit 确定 /el-button/div/div/el-drawer 补充两点 a.值班时间设置默认读取点击进来的日历时间所以不需要选择禁用掉 属性el-input v-modeladdForm.dutyTime stylewidth: 60% :disabledtrue/el-input 或el-date-picker clearable v-modelqueryParams.dutyTime typedate value-formatyyyy-MM-dd :readonlydutyRead placeholder请选择值班时间 /el-date-picker b.下拉选框设为默认选项在data() 函数中直接设addform属性数据为1没有生效想到了在重置按钮中再次加强一遍
// 单日添加失败addForm: {dutyClass: ,dutyPersonName: ,dutyArea: ,dutyType: ,dutyTime: ,prepareClass: 0,},
// 表单重置成功reset() {this.addForm {id: null,dutyTime: this.hanleDay.day,dutyPerson: null,dutyPersonName: null,dutyArea: null,dutyClass: null,dutyType: null,prepareClass: 1,};this.resetForm(form);},
2.表单验证第一次进去时不显示警告但是第二次刚进去即使没有操作也会全部红色报错
解决方案一开始怀疑是表单验证的触发方式有问题试了几种解决方案
a.
rules:{ dutyPersonName:[{ required: true, message: 请输入值班人员姓名 ,trigger: click}], dutyArea:[{ required: true, message: 请输入值班辖区 ,trigger: click}], dutyClass:[{ required: true, message: 请输入值班班次 ,trigger: click}], dutyType:[{ required: true, message: 请输入业务类型 ,trigger: click}], },
手动设置触发方式为 click这是我从Popover弹出框组件借鉴的无用 b.借鉴前面的代码片段改为 { required: true, message: 请输入质保期, trigger: blur },无用
c.考虑从生命周期的钩子函数显示表单验证的触发方式
mounted() { this.$nextTick(() { this.$refs.addForm.validate(); }); },无用且不知道为什么没有看起来很符合逻辑啊
d.最终借鉴网友的经验解决
addSingleWork() {this.reset()this.innerDrawer true;if (this.$refs.addForm)this.$refs.addForm.resetFields();},
