解决el-input无法输入的问题和表单验证失败问题

el-input无法输入的问题和表单验证失败问题

原因1、el-input组件没有绑定双向响应式数据(v-model)

解决方案:在data中定义一个变量,然后在el-input组件中使用v-model进行双向数据绑定,这样子就会解决el-input组件无法输入的问题了。

原因2、组件嵌套太深(具体原因不清楚,只知道解决方法)

有时,你会发现我们进行了双向数据绑定了,但是el-input还是无法输入,我们就要使用绑定input事件,然后使用$forceUpdate方法强制刷新,这样子会解决我们el-input无法输入问题,但是这会带出一个新的问题,那就是表单无法进行验证等一些问题。

解决方案
<el-form-item label="" :prop="'clusterList.'+i+'.clusterFlag'" :rules="getRules(item)">
	<el-input
		v-model="item.clusterFlag"
		clearable
		placeholder="集群"
		@input="showCluster"
	/>
</el-form-item>

methods

showCluster(){
      this.$forceUpdate();
},
//表单验证失败的问题
getRules(item){
	let rules=[]
	if(!item.clusterFlag){
        rules.push({ required: true, message: '该字段为必填项', trigger: 'blur' })
     }
     return rules
},
getRules(item)说明
表单验证失败的问题

使用$forceUpdate方法强制刷新 ,表单验证失效(表单已经输入值,表单验证显示为空)

由于此次表单是动态添加的,rules也需要动态添加,如上述代码

判断,当值为空的时候,验证生效

getRules(item){
	let rules=[]
	if(!item.clusterFlag){
        rules.push({ required: true, message: '该字段为必填项', trigger: 'blur' })
     }
     return rules
},
上一篇:C#面:什么是哈希表


下一篇:win11关机时候总是提示我更新正在进行中,请不要关机。