el-dialog关闭再打开后窗口内容不刷新问题及解决

<el-dialog
        :title="isEdit?'编辑':'新增'"
        :visible.sync="dialogVisible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        @close="resetForm"
      >
        <!-- element ui 中dialog的方法destroy-on-close,关闭时销毁 Dialog 中的元素 -->
        <deptDialog
          :id="fatherId"
          :origin-list="originList"
          :is-edit="isEdit"
          destroy-on-close
          @success="doSuccess"
          @doClose="dialogVisible=false"
        />
      </el-dialog>

<el-dialog
        :title="isEdit?'编辑':'新增'"
        :visible.sync="dialogVisible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        @close="resetForm"
      >
        <!-- 解决数据不更新的问题:v-if="dialogVisible",关闭和打开弹层,销毁和创建组件 -->
        <deptDialog
          v-if="dialogVisible"
          :id="fatherId"
          :origin-list="originList"
          :is-edit="isEdit"
          @success="doSuccess"
          @doClose="dialogVisible=false"
        />
      </el-dialog>

<el-dialog
        :title="isEdit?'编辑':'新增'"
        :visible.sync="dialogVisible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        @close="resetForm"
      >
        <!-- 添加引用: ref="deptDialog" -->
        <deptDialog
          :id="fatherId"
          ref="deptDialog"
          :origin-list="originList"
          :is-edit="isEdit"
          @success="doSuccess"
          @doClose="dialogVisible=false"
        />
      </el-dialog>

// 编辑
    doEdit(id) {
      //isEdit设为true,表示当前状态为编辑
      this.isEdit = true
      this.fatherId = id
      this.dialogVisible = true
      // 解决数据不更新的问题: this.$refs.deptDialog.loadDepartDetail()
      // 注意:由于DOM更新是异步的,此处要用$nextTick()
      this.$nextTick(() => {
        this.$refs.deptDialog.loadDepartDetail()
      })
      //或者放在宏任务里,如延时器中
      // setTimeout(() => {
      // this.$refs.deptDialog.loadDepartDetail()
      // }, 0)
    },

created() {
    //加载部门负责人列表数据
    this.loadEmployeesSimples()
    //如果为编辑状态,获取部门详情
    if (this.isEdit) this.loadDepartDetail()
  },

created() {
    //加载部门负责人列表数据
    this.loadEmployeesSimples()
    //如果为编辑状态,获取部门详情
    if (this.isEdit) this.loadDepartDetail()
  },
watch: {
    id: function(newVal, oldVal) {
      //调用获取部门详情函数
      this.loadDepartDetail()
    }
  }, 
  //上面这种写法不会立即触发,还需在created()中调用一次,用下面这种方法就不需要在created()中调用了
  //watch: {
  //   id: {
  //     handler: function(newVal, oldVal) {
  //       this.loadDepartDetail()
  //     },
  //     immediate: true 
  //   }
  // },
  //immediate表示在watch中首次绑定的时候，是否执行handler，值为true则表示在watch中声明的时候，就立即   //执行handler方法，值为false，则和一般使用watch一样，在数据发生变化的时候才执行handler。所以当为     //true时 在created周期里就可以不用在写 已经在watch 中写过的方法了

<el-dialog
        :title="isEdit?'编辑':'新增'"
        :visible.sync="dialogVisible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        @close="resetForm"
      >
        <!-- 给子组件添加key值 -->
        <deptDialog
          :id="fatherId"
          :key="fatherId"
          :origin-list="originList"
          :is-edit="isEdit"
          @success="doSuccess"
          @doClose="dialogVisible=false"
        />
      </el-dialog>

// 给父组件添加 @close="resetForm"
 <el-dialog
        :title="isEdit?'编辑':'新增'"
        :visible.sync="dialogVisible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        @close="resetForm"
      >
      //给子组件添加  ref="deptDialog"
        <deptDialog
          v-if="dialogVisible"
          ref="deptDialog"
          :origin-list="originList"
          :is-edit="isEdit"
          @success="doSuccess"
          @doClose="dialogVisible=false"
        />
      </el-dialog>
// 重置子组件表单
    resetForm() {
      // 调用子组件中的重置表单方法
      this.$refs.deptDialog.resetForm()
    }

// 在父组件中 dialog close时，来调用
    resetForm() {
      // resetFields是element-ui中的el-form组件提供一个api，它的作用是：
      // 1. 重置表单数据
      // 2. 清空校验结果(页面上红色的提示)
     this.$refs.deptForm.resetFields()
    }