Vue ElementUI Dialog組件重新渲染的兩種方法

1、Dialog組件重新渲染

兩種方法：

（1）設置key，強制組件重新渲染

a、直接在key上綁定new Date().getTime()

        <el-dialog title="部門編輯" :visible.sync="dialogFormVisible" @close="closeDialog">
            <!--key直接綁定一個時間，最簡單-->
            <dept-edit :id="id" :key="new Date().getTime()" ref="dept"></dept-edit>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="Save">確 定</el-button>
            </div>
        </el-dialog>

b、可以把key綁定到一個data上，但一定要在事件中修改data，否則無效

HTML部分

        <el-dialog title="部門編輯" :visible.sync="dialogFormVisible" @close="closeDialog">
            <!--key綁定data中的timer-->
            <dept-edit :id="id" :key="timer" ref="dept"></dept-edit>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="Save">確 定</el-button>
            </div>
        </el-dialog>

data部分

        data() {
            return {
                tableData: [],
                dialogFormVisible: false,
                id: 0,
                refresh:false,
                timer:new Date().getTime()  //聲明timer
            }
        },

js修改時間

            handleEdit(index, row) {
                //彈窗
                this.dialogFormVisible = true;
                this.refresh = true;
                this.id = row.id;
                var that = this;
                this.timer = new Date().getTime();  //彈窗加載時修改timer
            }

2、使用v-if的方式

初始加載時，data中設置的refresh為false，同時在dialog中設置v-if，彈窗顯示時設置為refresh為true，彈窗關閉時refresh為false

HTML部分

        <!--通過v-if綁定refresh，同時設置close事件-->
        <el-dialog title="部門編輯" :visible.sync="dialogFormVisible" v-if="refresh" @close="closeDialog">
            <dept-edit :id="id" ref="dept"></dept-edit>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="Save">確 定</el-button>
            </div>
        </el-dialog>

初始加載時，data中設置的refresh為false

        data() {
            return {
                tableData: [],
                dialogFormVisible: false,
                id: 0,
                refresh:false
            }
        }

彈窗顯示時設置refresh為true

            handleEdit(index, row) {
                //彈窗
                this.dialogFormVisible = true;
                this.refresh = true;  //彈窗顯示時設置為true
                this.id = row.id;

            }

彈窗關閉時設置refresh為false

            //彈窗關閉時設置refresh為false
            closeDialog(){
                this.refresh = false;
            }