1、首先定義好一個彈框，彈框程式碼放在最後

2、父元件中引入進來，用porps的方式傳遞一個show到子元件中，這種方式還可以傳遞其他的值過去。這種方法要注意不可以直接定義一個變數show為布林值，然後對show進行修改，會報錯的

3、還有個辦法也可以開啟關閉彈框，這個方法簡便，不用props傳值，複雜場景還是得使用上面那種方式

<template>
  <!-- 新增科室dialog -->
  <div class="add-departments-dialog">
    <el-dialog :visible.sync="dialogForm.show"
 
 :before-close="handleClose">
      <header>新增科室</header>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleFormRef"
        label-width="120px"
        class="demo-ruleForm"
      >
        <el-form-item label="科室名稱" prop="name">
          <
 
el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="組別" prop="type">
          <el-select v-model="ruleForm.type" placeholder="請選擇">
            <el-option label="內科" value="INNER"></el-option>
            <el-option 
 
label="外科" value="OUTER"></el-option>
          </el-select>
        </el-form-item>
        <div class="btns">
          <el-button type="primary" @click="handleSave">確 定</el-button>
          <el-button @click="handleClose">取 消</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      ruleForm: {
        name: "",
        type: ""
      },
      rules: {
        name: [{ required: true, message: "請輸入科室名稱", trigger: "blur" }],
        type: [{ required: true, message: "請選擇組別", trigger: "change" }]
      },
      bool: false
    };
  },
  methods: {
    handleSave() {
      this.$refs.ruleFormRef.validate(valid => {
        if (!valid) return this.$message.error("請正確填寫必要的表單項!");
        console.log(this.ruleForm);
      });
    },
    handleClose() {
      this.$refs.ruleFormRef.resetFields();
      this.dialogForm.show = false;
      // this.bool=false
    }
  },
  props: {
    dialogForm: {
      type: Object,
      default: {}
    }
  }
};
</script>
<style lang="scss">
@import "@/style/common.scss";
.add-departments-dialog {
  .el-dialog {
    width: 360px;
    height: 220px;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0 !important;
    .el-dialog__header,
    .el-dialog__body {
      padding: 0;
    }
    header {
      width: 100%;
      height: 38px;
      background-color: #1fb6af;
      border-radius: 3px 3px 0 0;
      color: #fff;
      line-height: 38px;
      padding-left: 10px;
    }
    .el-dialog__headerbtn {
      top: 11px;
      right: 10px;
      .el-icon-close {
        color: #fff;
      }
    }
    .el-form {
      margin-top: 20px;
      .el-form-item {
        margin-bottom: 20px;
      }
      .el-form-item__label,
      .el-form-item__content {
        line-height: 32px;
      }
      .el-form-item__content {
        width: 200px;
      }
      .btns {
        display: flex;
        justify-content: center;
        .el-button {
          width: 120px;
          height: 32px;
        }
      }
    }
  }
}
</style>