Form表单，调用resetFields()方法后的一些问题 #3146
Description
- I have searched the issues of this repository and believe that this is not a duplicate.
Version
2.0.0-beta.15
Environment
Vue3.0 typescript
Reproduction link
https://2x.antdv.com/docs/vue/introduce-cn/
Steps to reproduce
<template>
<a-modal
:title="title"
v-model:visible="visible"
@ok="handleOk"
:rules="rules"
width="700px"
:maskClosable="false"
>
<a-form
ref="modalForm"
:model="formItem"
:label-col="{ span: 8 }"
:wrapper-col="{ span: 16 }"
>
<a-row>
<a-col :span="12">
<a-form-item label="电表编号" name="meaternum">
<a-input
v-model:value="formItem.meaternum"
placeholder="请输入电表编号"
></a-input>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="制造商" name="manufacturer">
<a-input
v-model:value="formItem.manufacturer"
placeholder="请输入制造商"
/>
</a-form-item>
</a-col>
</a-row>
</a-form>
<template v-slot:footer>
<a-button key="back" @click="handleCancel">
取消
</a-button>
</template>
</a-modal>
<a-button key="submit" @click="show">
查看
</a-button>
</template>import { reactive, ref } from 'vue'
import { Options, Vue, setup } from 'vue-class-component'
import { mapState, mapGetters } from 'vuex'
interface FormItems {
[key: string]: any
[index: number]: any
}
export default class MeterForm extends Vue {
public $refs!: {
modalForm: HTMLFormElement
}
private visible = false
private title = '新增'
private rules = {}
private formItem: FormItems = {
id: '',
meaternum: '',
manufacturer: '',
}
public show(data: any) {
this.visible = true
// 这里修改meaternum 的值
this.formItem.meaternum = '1'
}
private handleOk() {
this.visible = false
// 重置表单
this.$refs.modalForm.resetFields()
}
private handleCancel() {
// 重置表单
this.$refs.modalForm.resetFields()
console.log('cancel', this.formItem)
// this.visible = false
}
}What is expected?
form表单调用resetFields()方法后，应重置表单中的绑定的值，恢复成默认值（meaternum赋值为''）
What is actually happening?
确实重置了表单中的绑定的值，但是重置为show()方法中，修改后的值（meaternum赋值为'1'）
在其他的UI组件，如element、iview中，没有这种情况的发生。