el-form的resetFields方法失效问题

想睡八个小时2025-12-11 9:43

resetFields()失效

背景

el-form在el-dialog内，用于绑定外部报表的查询条件。
prop和model已正确填写。
el-dialog使用v-if进行控制。
第一次打开dialog选择查询条件后可以正常重置，但是关闭弹窗后进行重置无法清空搜索条件。

原因

**resetFields方法是将表单重置为form组件dom刚渲染时的初始值，**由于dialog内form组件是和data内queryParams进行的双向数据绑定，所以第一次打开form组件的初始值是空值，可以正常重置。给form组件填充值后关闭dialog然后重新打开（dom已重新渲染），form组件重新渲染时初始值不为空，故无法重置为空。

解决方案

笨办法，重置方法内手动将queryParams对象属性置空（有大佬有更好方法请赐教）。

js 复制代码

resetQuery() {
    this.queryParams = {
        pageNum: 1,
        pageSize: 200,
        productionLine: "",
        outboundTime: [],
        materialReceiverGroup: "",
        steelRollNumber: "",
    };
    this.getList();
},

问题延伸

**打开dialog时手动赋值场景：**如果想要将值重置为空，需要将赋值操作放在this.$nextTick方法内（原理使form初始化值为空），如下。

js 复制代码

openQuery() {
    this.searchOpen = true;
    this.$nextTick(() => {
        this.queryParams.steelRollNumber = "demo";
    });
},

神奇想法，如何有业务场景需要给dialog模态框内form组件一个默认值，且重置该组件不希望置空而是置为默认值，可以对与form组件双向绑定的对象属性赋初始值，使form初始化时初始值不为空。

法一：data函数内对象定义直接给初始值。

法二：打开dialog方法内赋值操作不放在his.$nextTick方法内。