<template>
  <el-dialog v-model="dialogVisible" :title="title" width="40%" destroy-on-close>
    <el-form v-model="newUser" label-width="120px" :rules="rules">
      <el-form-item label="用户名" prop="userName">
        <el-input v-model="newUser.userName" placeholder="请输入用户名称"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="userEmail">
        <el-input v-model="newUser.userEmail" placeholder="请输入用户邮箱">
          <template #append>@imooc.com</template></el-input
        >
      </el-form-item>
      <el-form-item label="手机号" prop="mobile">
        <el-input v-model="newUser.mobile" placeholder="请输入用户手机号"></el-input>
      </el-form-item>
      <el-form-item label="岗位" prop="job">
        <el-input v-model="newUser.job" placeholder="请输入用户岗位"></el-input>
      </el-form-item>
      <el-form-item label="状态" prop="state" style="text-align: left">
        <el-select v-model="newUser.state">
          <el-option :value="1" label="在职"></el-option>
          <el-option :value="2" label="离职"></el-option>
          <el-option :value="3" label="在职"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="系统角色" prop="role">
        <el-select
          v-model="newUser.role"
          style="width: 100%"
          placeholder="请选择对应角色"
        ></el-select>
      </el-form-item>
      <el-form-item label="所属部门" prop="depId" style="text-align: left">
        <el-select v-model="newUser.depId" placeholder="请选择所属部门"></el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="handleCommit">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script lang="ts">
import { defineComponent, onMounted, onUnmounted, reactive, ref } from 'vue'

export default defineComponent({
  props: {
    title: {
      type: String,
      default: '增加用户'
    }
  },
  setup() {
    const newUser = reactive({})
    const rules = {
      userName: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
      userEmail: [{ required: true, message: '邮箱不能为空', trigger: 'blur' }],
      depId: [{ required: true, message: '请选择部门', trigger: 'blur' }]
    }

    const dialogVisible = ref(false)

    function handleCancel() {
      dialogVisible.value = false
    }

    function handleCommit() {
      // dialogVisible.value = false
      console.log(newUser)
    }

    onMounted(() => {
      console.log('Dialog Mounted')
    })

    onUnmounted(() => {
      console.log('Dialog Unmounted')
    })

    return {
      dialogVisible,
      newUser,
      handleCancel,
      handleCommit,
      rules
    }
  }
})
</script>

不管填什么都是无效的，请问老师问题有可能是出在哪的呢？
这种问题一般怎么排查呀，都不知道怎么打断点