简单整理些问题

实际问题

1.表单回显之后，resetFields方法失效

原因：选中数据的同时就进行回显，页面还未执行完毕，这时候表单的初始值就会被设置成回显的值，所以resetFields方法好像没有生效

解决：设置回显值的时候 不要直接赋值，在外部加上this.$nextTick或者setTimeout

this.$nextTick(() => {
   Object.keys(row).forEach(key => { this.editForm[key] = row[key] })
})

2.使用oninput校验导致后续传值为空

 <el-input v-model.trim="recAccountNo" clearable oninput="value=value.replace(/[^0-9]/g,'')" />

先输入非数字字符，在输入数字后续传值该字段为空字符串

需要加上以下代码，进行重新赋值

@blur="recAccountNo=$event.target.value"

概念问题

v-model和:model区别

v-model

v-model指令在表单<input> <textarea> <select>元素上创建双向数据绑定，它会根据控件类型自动选取正确的方法来更新元素，v-model本质上不过是语法糖，他负责监听用户输入事件以更新数据

v-model会忽略所有表单元素的value、checked、selected特性的初始值而总是将vue实例的数据作为数据来源，应该通过JavaScript在组件的data选项中声明初始值

v-model在内部为不同的输入元素使用不同的属性并抛出不同的事件，例如input change事件

:model

:model是v-bind:model的缩写，<child :model='modelValue' />,这种只是将父组件的数据传递到了子组件，并没有实现子组件和父组件数据的双向绑定，当然引用类型除外，子组件改变引用类型的数据的话，父组件也会改变的