Vue封装对话框组件--computed属性

子组件

<template>
  <div>
    <!-- 添加|修改 弹框 -->
    <h-msg-box
      v-model="boolShow"
      :title="title"
      @on-cancel="handleCancelClose('取消')"
      @on-close="handleCancelClose('关闭')"
      :beforeOkClose="beforeOkClose"
    >
      <h-form
        ref="tableForm"
        :model="tableForm"
        :label-width="80"
        :rules="tableRule"
      >
        <h-form-item label="姓名" prop="name">
          <h-input v-model="tableForm.name" placeholder="请输入姓名"></h-input>
        </h-form-item>
        <h-form-item label="年龄" prop="age">
          <h-input v-model="tableForm.age" placeholder="请输入年龄"></h-input>
        </h-form-item>
        <h-form-item label="地址" prop="address">
          <h-input
            v-model="tableForm.address"
            placeholder="请输入地址"
          ></h-input>
        </h-form-item>
      </h-form>
    </h-msg-box>
  </div>
</template>

<script>
export default {
  name: 'EditDialog',
  props: {
    title: String,
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    tableData: {
      type: Array,
      default: [],
    },
  },
  computed: {
    boolShow: {
      set: function (val) {
        this.$emit('update:dialogVisible', val)
      },
      get: function () {
        return this.dialogVisible
      },
    },
  },
  data() {
    return {
      tableForm: {
        name: '',
        age: '',
        address: '',
      },
      tableRule: {
        name: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
        age: [{ required: true, message: '年龄不能为空', trigger: 'blur' }],
        address: [{ required: true, message: '地址不能为空', trigger: 'blur' }],
      },
    }
  },
  methods: {
    handleCancelClose(event) {
      event === '取消' ? this.$hMessage.info('点击了取消！') : ''
      this.$refs['tableForm'].resetFields()
      // this.$emit('handleCancelClose', false)
      this.$emit('update:dialogVisible', false)
      
    },
    beforeOkClose() {
      return new Promise((resolve, reject) => {
        this.$refs['tableForm'].validate((valid) => {
          if (valid) {
            setTimeout(() => {
              this.$hMessage.success('提交成功!')
              if (this.tableForm) {
                this.tableData.splice(0, 0, this.tableForm)
              }
              this.currentPage = 1
              this.tableForm = {}
              resolve(true)
            }, 1000)
          } else {
            reject(false)
            this.$hMessage.error('有必填项没有填!')
          }
        })
      })
    },
  },
}
</script>

<style>
</style>

 父组件

  <edit-dialog
        :dialogVisible.sync="addDialogVisible"
        title="添加表格数据"
        :tableData="tableData"
      />