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>
方案一:使用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>