目录
[编辑 1.3怎么点击新增部门就出现这个表单?](#编辑 1.3怎么点击新增部门就出现这个表单?)
一新增部门
1.1原型
1.2如何控制对话框的显示和隐藏?
只需设置(v-model后面的元素为动态模型即可)const dialogFormVisible=ref(false);//隐藏,为true就显示
1.3怎么点击新增部门就出现这个表单?
可以给html中的新增部门按钮帮点一个鼠标单击事件(@click="addDept"),然后在<script>中声明addDept函数,并在里面将dialogFormVisible的value属性设置为true即可
1.4新增部门和编辑部门怎么共用一个表单?
需要给对话框中的title绑定事件 :title="变量名",然后在<script>中声明const 变量名=ref('');并且为上一步中的addDept方法中设置变量名.value='新增部门'即可；同理,编辑部门也是这样设置的；
1.5怎么点击保存后和后端进行交互?
在<script>中设置了const dept=ref({name=''})//这个就是保存表单提交的数据的,然后将这个使用axios传递给后端即可,怎么操作？
首先在dept.js中设置新增(需要有参数)
并且在index.vue中从路径中导入这个方法名
在save方法中使用这个addApi就行，
当新增部门点击提交成功后,会出现提交成功信息,然后关闭对话框,最后表单数据刷新这三个步骤
失败后,就显示后端传递过来的错误信息(msg)就行
1.6提示成功信息阻塞不美观怎么办?
提示成功信息会卡在这里,该怎么解决？
找组件库FeedBack反馈组件
1.7再次点击新增部门遗留上次信息?
只需在addDept里面将dept.value的值设置为空就行
1.8表单数据合法性怎么校验?
三步:在script中定义表单校验,在对话框中绑定,在需要检验的表单行位置设置prop属性即可
required:true表示必填项,message:是提示信息,trigger表示触发时机','blur'表示鼠标离开时就出现提示信息;
在el-form里面使用属性rules并为其绑定事件,再设置prop绑定检验事件即可即可
1.9现在就算有异常,但是点击提交也是可以的,怎么解决?
需要在save里面添加表单验证
前提先用下面的变量绑定表单项,便于后面引用表单项
(在 Vue 中使用 ref 绑定表单（如这里的 el-form 组件），主要是为了获取表单组件的实例，从而调用其提供的方法或访问其内部状态，以实现更灵活的表单操作)
1.10上次表单提交的校验规则还遗留,怎么解决?
也是在刚点击表单，调用save方法时,在里面将校验变量的value设置为空即可
1.11总结
本文介绍了Vue中实现部门管理表单的开发要点，主要包括：1）使用ref控制对话框显示/隐藏；2）通过变量控制共用表单的标题切换；3）axios与后端交互的实现流程；4）表单校验规则的定义与应用；5）常见问题的解决方案：清空遗留数据、重置校验规则、优化提示信息等。关键点在于合理使用ref管理组件状态，并通过事件绑定实现交互逻辑。