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;
            }