element 表单使用 this.$refs[formName].resetFields() 进行数据重置,但重置的初始数据是基于表单第一次渲染时的数据为模板。由于点击编辑时,模态框显示与表单内容渲染是同时进行,所以 el-form 就认为回填值是初始数据,每次重置都以回填值数据来重置表单。
解决思路:将回填值赋予表单对象的操作 放入 $nextTick 中延迟进行,让表单对象将空数据认定为初始数据。
解决方法
<在关闭模态框时重置对象id、重置表单校验>
<el-dialog :visible.sync="visible" @close="form.id=null;$refs.form.resetFields()">
// 点击编辑 row:回填数据
editFT(row) {
// 先显示模态框
this.visible = true;
// 将回填值赋值操作 延迟到下次 DOM 更新循环之后 (模态框显示并渲染 form 后) 执行
this.$nextTick(() => {
this.form = JSON.parse(JSON.stringify(row));
});
},