1.场景
在开发过程中,新增和编辑一个form表单操作的时候,新增关闭抽屉调用resetFields没问题,但是编辑的时候会失效。
2.产生原因
通过resetFields定义来看将所有字段值重置为初始值并移除校验结果,当编辑的时候第一步会对form进行赋值操作,这个时候页面还未渲染完成,就造成默认值变成了赋值操作后的数据,所以当调用resetFields的时候会产生失效。(仅代表个人理解)
3.解决办法(nextTick)
当编辑的时候,使用nextTick进行赋值操作。
//vue3.0
<script setup>
impoort{ nextTick } from 'vue';
const edit = (data) => {
nextTicket(() => {
//编辑赋值操作
form.a = data.a
})
<script>