解决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
},