el-input无法输入,使用$forceUpdate()强制数据刷新之后导致表单rules校验失效问题

21 阅读1分钟

vue:

    <el-collapse v-model="activeNames" @change="handleChange" style="margin-bottom: 10px;">
      <el-collapse-item title="默认参数" name="1">
        <el-form :model="ruleForm" ref="form" :rules="rules" size="small" label-width="200px">
          <el-form-item v-for="(item, index) in tmpItems" :key="index" :label="item.paramChineseName"
            :prop="item.paramChineseName">
            <span slot="label" style="width: 250px;">
              <el-tooltip placement="top">
                <div slot="content">
                  {{ item.paramChineseName }}
                </div>
                <span>{{ item.paramChineseName }}</span>
              </el-tooltip>
            </span>
            <el-input :disabled="item.isModifiable == 0" style="width: 400px;"
              :title="item.isModifiable == 0 ? '此表单编辑时不允许编辑' : ''"
              v-model.trim="ruleForm[item.paramChineseName]" :placeholder="`请输入${item.paramChineseName}`" clearable
              type="text" :show-word-limit="true"></el-input>
          </el-form-item>
        </el-form>
      </el-collapse-item>
    </el-collapse>

image.png

方案一:使用this.$forceUpdate();强制刷新,解决输入框输入问题,但是会导致表单校验失效。

changeMessage() {
      this.$forceUpdate();
},
<el-input :disabled="item.isModifiable == 0" @input="changeMessage" style="width: 400px;" 
:title="item.isModifiable == 0 ? '此表单编辑时不允许编辑' : ''"  v-model.trim="ruleForm[item.paramChineseName]" 
:placeholder="`请输入${item.paramChineseName}`" clearable type="text" :show-word-limit="true"></el-input>

方案二: 可以$set来代替forceUpdate

    // 为解决input框不能输入的问题
    change(e, typeName) {
      // this.$forceUpdate();  // 强制数据刷新之后, 验证失效, 改用 $set
      this.$delete(this.ruleForm, typeName) // set之前先删除
      this.$set(this.ruleForm, typeName, e)
    },
<el-input :disabled="item.isModifiable == 0" 
@input="$event => change( $event, item.paramChineseName)" 
style="width: 400px;":title="item.isModifiable == 0 ? '此表单编辑时不允许编辑' : ''" 
v-model.trim="ruleForm[item.paramChineseName]" 
:placeholder="`请输入${item.paramChineseName}`" clearable type="text" :show-word-limit="true">
</el-input>