自定义弹框 ：visible.sync

use a data or computed property based on the prop’s value.

通过设置 :befor-close 来规避这一问题，从而解决问题

before-close为关闭弹窗前的回调函数，在操作改变子组件关闭事件之前先调用父组件的关闭事件，就不会再报错了

<template>
  <el-dialog title="审核" :visible.sync="visible" :before-close="dialogClose">
 
  </el-dialog>
</template>

<script>
import { auditcolumns } from '../columns';
import { getPositionRecord } from '@/api/exam.service';
export default {
  name: 'CampusRecord',
  model: {
    prop: 'id',
    event: 'idchange'
  },
  props: {
    id: {
      type: String,
      default: ''
    },
    visible: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      idInner: this.id,
      campusColumns: auditcolumns(this),
      // 请求参数
      reqArgs: {
        pageNum: 1,
        pageSize: 10,
        applyTableId: this.id
      },
      reason: '',
      campusData: { },
      listLoading: true
    };
  },
  watch: {
    id(newvalue, oldvalue) {
      this.idInner = newvalue;
      this.reqArgs.applyTableId = newvalue;
    }
  },
  created() {},
  methods: {
    dialogClose() {
      this.$emit('update:visible', false);
    },
    refreshList() {
      this.reqArgs.pageNum = 1;
      this.queryList();
    },
    queryList() {
      var that = this;
      getPositionRecord(that.reqArgs).then(res => {
        if (res.status === 0) {
          that.campusData = res.result;
          that.listLoading = false;
        }
      });
    },
    handleFilter(type, value, params) {
      if (type !== 'pageNum') {
        this[params].pageNum = 1;
      }
      this[params][type] = value;
      this.queryList();
    }
  }
};
</script>
<style lang="scss" scoped>
.el-input {
  width: 200px !important;
}
</style>


    <campusRecord :id="id" ref="CampusRecord" :visible.sync="recordDialog" />