el-form中使用el-input设置readonly BUG修改

项目开发中遇到问题:

需求:在form表单中,点击输入框A弹出一个表单,选择表单某一项数据后回填到输入框A

问题:为了实现点击输入框A弹出一个表单,给el-input设置readonly,结果表单验证不通过及数据回填不能及时更新UI界面

解决办法:

1.表单验证不通过:自定义验证规则

2.数据回填不能及时更新UI界面:强制更新组件

this.$forceUpdate()

 

<el-form
ref="formref"
:model="dataform"
style="width: 100%"
label-width="100px"
:rules="rules"
label-position="left"
>
<el-form-item label="操作人" prop="czren" style="width: 100%">
<el-input
ref="sysNameRef"
v-model="dataform.czren"
placeholder="请选择操作人"
readonly
@focus="handleCZRen"
/>
</el-form-item>
</el-form>
data () {
const validateCzren = (rule, value, callback) => {
if (value === '') {
callback(new Error('请先选择操作人'))
} else {
callback()
}
}
return {
rules: {
czren: [
// { required: true, message: '请先选择操作人', trigger: ['blur', 'change'] },
{ required: true, validator: validateCzren, trigger: ['blur', 'change'] }
]
}
}
},
methods: {
handleChoosedPersons (val) {
this.$nextTick(() => {
const nameslist = val.map(item => item.label)
this.dataform.czren = nameslist.join(',')
this.$forceUpdate() // 强制组件重新渲染
})
},
}
posted @   丫丫learning  阅读(352)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
点击右上角即可分享
微信分享提示