关于 ElementUI 中 Form 组件的 resetFields 方法

项目场景

需求：期望在 App.vue 中点击按钮展示 EditUserDialog.vue 中的弹框，并在弹框的表单中填充数据，关闭弹框时调用 resetFields 方法重置表单字段为初始值

src/App.vue

<template>
    <div id="app">
        <edit-user-dialog ref="editUserDialog"></edit-user-dialog>
        <el-button type="primary" @click="handleClick">弹框</el-button>
    </div>
</template>

<script>
import EditUserDialog from './components/EditUserDialog';
export default {
    
    
    name: 'App',
    components: {
    
    
        EditUserDialog,
    },
    methods: {
    
    
        handleClick() {
    
    
            this.$refs['editUserDialog'].getDetails();
        },
    },
};
</script>

<style>
#app {
    
    
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
}
</style>

src/components/EditUserDialog.vue

<template>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" @close="listenDialogClose">
        <el-form :model="editForm" :rules="editFormRules" ref="editForm" class="demo-editForm">
            <el-form-item prop="username">
                <el-input v-model="editForm.username" placeholder="请输入用户名"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
    </el-dialog>
</template>

<script>
import axios from 'axios';
export default {
    
    
    name: 'EditUserDialog',
    data() {
    
    
        return {
    
    
            dialogVisible: false,
            editForm: {
    
    
                username: '',
            },
            editFormRules: {
    
    
                username: [{
    
     required: true, message: '请输入活动名称', trigger: 'blur' }],
            },
        };
    },
    methods: {
    
    
        async getDetails() {
    
    
            // 请求数据并赋值给 editForm
            const {
    
    
                data: {
    
     username },
            } = await axios.get('/data.json');
            this.editForm.username = username;
            // 展示弹框
            this.dialogVisible = true;
        },
        listenDialogClose() {
    
    
            this.$refs['editForm'].resetFields();
        },
    },
};
</script>

public/data.json

{
    
    
  	"username": "ifer"
}

问题说明

关闭弹框时，发现 data 中 editForm.username 并没有重置为初始值（即空字符串），查看文档关于 resetFields 方法的说明：对整个表单进行重置，将所有字段值重置为初始值并移除校验结果，费解！

原因分析

…，查看 Dialog 组件时发现了下面一句话

Dialog 的内容是懒渲染的，即在第一次被打开之前，传入的默认 slot 不会被渲染到 DOM 上。因此，如果需要执行 DOM 操作，或通过 ref 获取相应组件，请在 open 事件回调中进行。

大悟，初始值的真正含义是 Form 组件渲染之前的那个值！

再看下面的代码，由于 Dialog 的内容是懒渲染的，Form 组件的真正渲染是在 #2 处，而初始值在渲染前 #1 处已经被改成了 username，所以关闭弹框时即便调用了 resetFields，editForm.username 的数据还是 username

async getDetails() {
    
    
  const {
    
     data: {
    
     username } } = await axios.get('/data.json');
  // #1
  this.editForm.username = username;
  // #2
  this.dialogVisible = true;
}

解决方法就很简单了，先展示弹框再进行赋值的操作，把 #2 处的代码提前即可