AntDesignVue使⽤⽀持v-model效验的FormModel表单遇到的⼀
个坑
按照官⽹上⽤法写好表单后，在a-select上绑定了change事件
<a-form-model-item label="类型" prop="pe">
<a-select v-model="pe" placeholder="请选择数据库类型" @change="handleChange">
<!-- <a-select-option value="">请选择</a-select-option> -->
<a-select-option value="0">MySQL</a-select-option>
<a-select-option value="1">SQL Server</a-select-option>
</a-select>
</a-form-model-item>
结果下拉框选择不了了，F12查看控制台，报错了：TypeError: originalEvents.change.apply is not a function
源头是FormItem.js，change.apply是未定义
折腾许久，最后发现官⽹FormModel⽂档的API处有提醒注意
blur事件意思就是From.Item把input、select等表单项的blur、change事件劫持了，⽤来做⾃动效验，如果我们要给input、select写blur、change怎么办呢？
按照官⽹的写法做，但是要注意⼏个点：
1、要给a-form-model-item设置⼀个ref引⽤名称。
2、autoLink要设置成false，表⽰是否⾃动关联表单域，对于⼤部分情况都可以使⽤⾃动关联，如果不满⾜⾃动关联的条件，可以⼿动关联。
3、定义change事件，最后写上：this.$FieldChange()，⽤于表单的⾃动效验。
handleChange (value) {
console.log(value)
　// TODO
this.$FieldChange()
}
最后完整的代码：
<a-form-model-item label="类型" ref="dbType" prop="pe" :autoLink="true">
<a-select v-model="pe" placeholder="请选择数据库类型" @change="handleChange">
<!-- <a-select-option value="">请选择</a-select-option> -->
<a-select-option value="0">MySQL</a-select-option>
<a-select-option value="1">SQL Server</a-select-option>
</a-select>
</a-form-model-item>
handleChange (value) {
console.log(value)
// TODO
this.$FieldChange()
}
Over!

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。