背景

在做管理台項目時，我們會經常使用到表單+表格+彈窗表單的組合，以完成對數據的增、刪、查、改。

• 在vue2+elementui項目中，使用彈窗dialog+表單form，實現對數據的添加和修改。
• 每次關閉彈窗時，使用resetFields方法對錶單進行重置。
• 下一次打開彈窗時，
  • 如果是添加數據，那麼會呈現空的表單。
  • 如果是修改數據，那麼表單上已預填好了數據。

很多小伙伴可能會遇到表單重置的初始值問題，如圖。

問題具體描述為：每次關閉彈窗時，表單不是重置為我們設置的空數據，而是重置為在該頁面上第一次打開彈窗時表單的數據。

這意味著，如果我們進入頁面後第一次打開的是修改彈窗，那麼以後每次表單重置的數據都是最開始打開的那個修改彈窗表單的初始數據。

原因

讓我們看下代碼：

<template>
    <div>
        <!-- 添加 -->
        <el-button @click="handleAdd">添加</el-button>

        <!-- 表格 -->
        <el-table :data="tableData" style="width: 800px">
            <el-table-column prop="id" label="id" width="180" align="center" />
            <el-table-column prop="name" label="名稱" width="180" align="center" />
            <el-table-column label="操作" align="center">
                <template v-slot="{ row }">
                    <el-button @click="handleEdit(row)">修改</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 彈窗 -->
        <el-dialog title="添加/修改" :visible.sync="dialogVisible" width="30%" :before-close="handleClose" center>
            <template>
                <div>
                    <el-form ref="form" :model="formData">
                        <el-form-item prop="name" label="名稱">
                            <el-input v-model="formData.name"></el-input>
                        </el-form-item>
                        <el-form-item prop="id" label="id">
                            <el-input v-model="formData.id"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
            </template>
            <template #footer>
                <el-button type="primary">確定</el-button>
                <el-button type="info">取消</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'formInitial',
    data() {
        return {
            tableData: [
                { id: 1, name: '王小虎' },
                { id: 2, name: '劉小白' },
                { id: 3, name: '張曉來' },
            ],
            formData: {
                name: '',
                id: '',
            },
            dialogVisible: false,
        };
    },
    methods: {
        // 添加
        handleAdd() {
            this.dialogVisible = true;
        },
        // 編輯  !!! 問題所在 !!!
        handleEdit(row) {
            // 給表單賦初值
            this.formData.name = row.name;
            this.formData.id = row.id;
            // 打開彈窗
            this.dialogVisible = true;
        },
        // 彈窗關閉
        handleClose() {
            // 初始數據
            this.$refs.form.resetFields();
            // 關閉彈窗
            this.dialogVisible = false;
        }
    },
};
</script>

這裡我們重點關註handleEdit() 這個方法。

錶面上看並沒有什麼問題，每次點擊修改，打開彈窗前，表單賦初值。

這裡就不跟大伙兒賣關子了，原因：

• 一開始彈窗隱藏時，彈窗樣式加上了display: none 屬性。
• display: none 屬性的作用：將元素從DOM結構中完全移除。
• 而表單是放在彈窗里的，意味著表單一開始不會出現在頁面結構中，此時data 中的預設數據formData 並沒有作用上表單。
• 當點擊修改時，觸發handleEdit() 方法，修改了formData 。此時彈窗打開，新的formData 作用上表單，並且表單將新的formData ，當作了初始數據！

解決

解決思路很簡單，就是想辦法讓表單吃上原始的formData 。

原來是先賦數據，再打開彈窗。那麼現在改為先打開彈窗，再賦數據。

只需要修改handleEdit()方法：

// 編輯
handleEdit(row) {
    // 打開彈窗
    this.dialogVisible = true;
    // 等到下次DOM渲染完成，即彈窗完全顯示後執行
    this.$nextTick(() => {
        // 給表單賦初值
        this.formData.name = row.name;
        this.formData.id = row.id;
    });
},

這裡用到this.$nextTick() ，是為了保證賦值是發生在彈窗打開後，所以彈窗打開的那一刻，表單使用的還是最初data中的formData ，並將其作為表單初始值。