就是在封装组件时,初始化一个initForm对象,然后将这个对象赋值给一个formDat对象,传入form组件与form表单双向绑定。当form表单改变了,会引起formDat改变。然后想重置表单时,再令formData = initForm。这个时候form并不会重置清空。我就感到很纳闷。
<script>
import baseForm from '@/base-ui/base-form/index.js'
export default {
components: {
baseForm
},
props: {
formItems: {
type: Array,
default: () => ([])
},
labelWidth: {
type: String,
default: '90px',
},
},
data() {
return {
formData: {},
initFormData: {}
}
},
created() {
this.init()
},
computed: {
},
methods: {
init() {
this.formItems.forEach(item => {
this.initFormData[item.field] = ''
});
this.formData = this.initFormData
},
resetHandle() {
//这个时候重置表单并没有效果
this.formData = this.initFormData
},
searchClick() {
console.log(this.formData, 'formDATA')
}
}
}
</script>
然后仔细一想,原来这是浅拷贝,都是共享一个存储地址,所以一个改变的时候另一个也会改变
所以重置的时候要再调用一遍init()将form重置
resetHandle() {
this.init()
},