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() // 强制组件重新渲染
      })
    },
 }