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