武邑网站建设,微网站开发项目合作协议,深圳宝安区必去景点,国内做五金加工的订单网站前言
以下内容都是基于element Plus 和 vue3
一个form-item校验两个下拉框
有时候不可避免会遇到需要一个form-item校验两个下拉框的情况#xff0c;比如#xff1a; 这种情况下传统的校验已经无法实现#xff0c;需要通过form表单提供的自定义校验来实现。以上面的必填…前言
以下内容都是基于element Plus 和 vue3
一个form-item校验两个下拉框
有时候不可避免会遇到需要一个form-item校验两个下拉框的情况比如 这种情况下传统的校验已经无法实现需要通过form表单提供的自定义校验来实现。以上面的必填为例
el-form-item label工作时报 propworkStartTimeel-selectv-modelstates.formData.workStartTimefilterablestylewidth: 120pxplaceholder请选择clearableel-optionv-foritem in states.workStartTimeList:keyitem.completeTime:labelitem.label:valueitem.completeTime//el-selectspan stylepadding: 0px 5px ~ /spanel-selectv-modelstates.formData.workEndTimefilterablestylewidth: 120pxplaceholder请选择clearablerefworkEndTimeRefel-optionv-foritem in states.workEndTimeList:keyitem.completeTime:labelitem.label:valueitem.completeTime//el-select
/el-form-itemconst validatePass (rule: any, value: any, callback: any) {let workEndTime workEndTimeRef.value.selected.valueif (value workEndTime) {// 校验成功这里也可以一些其他逻辑callback()} else {callback(new Error(工作时报不能为空))}
}
const rules reactive({workStartTime: [{required: true,validator: validatePass,trigger: change,},],
})注意点 1、定义的校验方法要放在校验规则上面不然会提示找不到方法 2、这点最重要首先form-item上绑定的属性是workStartTime所以你校验方法中只能拿到该属性对应的值。另一个下拉的值要先获取到你必须在下拉上绑定一个ref 你可以通过打印这个ref来找到另一个下拉的值。当第一个下拉改变后就会触发校验这时只需要判断两个下拉是否都已经有值如果没有值返回提示信息就好。
下拉框加一个二次确认确认值是否改变
以下图为例当计划类型值的改变时需要清空其他值时这时最好给与一个二次确认。确认是否改变而不是直接改变导致其他数据被清空这样会很奇怪。 这里的问题是当取消后应该显示原来显示的值。最初想的方向有点错了想通过监听来实现当取消时直接将旧值赋值给绑定的属性但实际结果是监听一直被触发确认弹窗无法被关闭。
其实实现起来挺简单最怕的就是方向想错了。可以定义一个变量来保存旧值然后将二次确认弹窗的部分加到下拉框change事件里
// 计划类型改变事件
const planTypeChange val {if (states.lastPlanType) {E_Msg.confirm(提示, 计划类型改变将清空所有资源对应的编码是否确认修改).then(() {emits(planTypeChange, val, true)}).catch(() {states.formData.planType states.lastPlanType})} else {states.lastPlanType val}
}当第一次下拉选择时不应该弹出二次确认这时将当前选择的值记录当下次下拉改变后就会进行提示。 这里不用判断记录的值是否和当前选择的值相同只有当下拉值改变后才会触发change事件。change事件触发了一定说明值改变了。
获取form校验的返回结果
有时候因为业务逻辑比较复杂就会进行组件拆分。这时遇到的问题时如何在父组件里获取到子组件校验后的返回值。查了一下确实可以实现
// 子组件//获取表单数据
const getFormData () {return baseFormRef.value.validate().then(res {console.log(校验结果, res)if (res) {// 校验成功将表单数据返回return states.formData} else {// 检验失败返回false表示子组件表单检验不满足return false}})
}// 父组件子组件的返回值是一个promise函数这里要进行处理// 这里比较特殊父组件也需要进行校验正常情况添加上 async和await就好
formRef.value.validate(async valid {if (valid) {// 基本信息const baseData await baseRef.value.getFormData()// 资源信息const resourceData resourceRef.value.getFormData()console.log(保存的信息, baseData, resourceData)if (baseData resourceData) {}}})
