1 通过v-if来控制el-dialog的显隐
|---------|--------------------------|---------|
| visible | 是否显示 Dialog，支持 .sync 修饰符 | boolean |
加了这个属性组件创建了就会一直显示，这里配合下面的V-If来控制它的显隐，组件创建就显示，组件销毁，它也就没有了
2.点击取消按钮，怎么关闭弹窗的
子组件
父组件
子组件（add.vue）
↓
点击取消按钮 → handleClose() → this.$emit("close")
↓
触发父组件的 @close 事件
↓
父组件（index.vue）
↓
handleClose() → this.ctx.type = null
↓
v-if="ctx.type === 'add' || ctx.type === 'edit'" 条件不满足
↓
整个 <Add> 组件被销毁
↓
对话框消失
-
子组件 ：只负责触发事件，不控制自己的显示/隐藏
-
父组件 ：通过 v-if 控制子组件的生命周期
-
通信方式 ：使用 $emit 和 @事件名 进行父子组件通信
3.从后端获取数据，供新增列表和编辑的时候选择
3.编辑员工时的表单回显
点击编辑的时候把row的信息传过去，让getDetail可以拿到Id,返回对应的数据
4.计算属性的字符串如何变成可执行的函数
const api = { createStaff: function(data) { /* 新增员工逻辑 */ },
updateStaff: function(data) { /* 编辑员工逻辑 */ }, // 其他接口方法... };
| 访问方式 | 写法 | 适用场景 |
|---|---|---|
| 点语法 | api.createStaff |
属性名是固定字符串时 |
| 方括号语法 | api["createStaff"] |
属性名是变量 / 动态字符串时 |
// 点语法：直接访问固定属性 const addFn = api.createStaff; // 方括号语法：用字符串访问属性 const addFn2 = api["createStaff"]; // addFn 和 addFn2 是同一个函数，完全等价
// 编辑场景：执行updateStaff函数 const [err, res] = await updateFn({ ...this.form, userId: this.record.id });// 新增场景：执行createStaff函数 const [err, res] = await createFn({ ...this.form });
// 你
代码里的简写：把"拿函数+执行函数"一步完成 await api[this.apiName]({ ...this.form, userId: this.record?.id });
5.级联选择器的数据回显
api.getDepartmentTree();通过这个函数，取到部门的数据，然后赋值给tree，把这个tree的数据交给bulidingTree,处理成级联选择器要求的数据结构，然后级联选择器通过绑定 staffDepartmentTree ，这个变量，就能获取处理好的数据，进行回显。
在 bulidingTree的里面先用...item把数据进行了解构，并且利用递归，把子选项都遍历出来
6.提交表单
7.工具函数isDef
逻辑与运算符 ( && ) 的特性 ：
-
逻辑与运算遵循"一假则假"的规则
-
只要有一个操作数为 false ，整个表达式就返回 false
-
只有所有操作数都为 true ，才返回 true
三个比较表达式的结果 ：
. 为什么不需要显式转换为布尔值 ：
-
比较运算符 ( !== ) 的结果本身就是布尔值 ( true 或 false )
-
逻辑运算符 ( && ) 会直接使用这些布尔值进行计算
-
不需要额外的 Boolean() 转换
总结：
isDef 函数的逻辑是：
-
如果 val 是 undefined 、 null 或空字符串 "" 中的 任何一个
-
对应的比较表达式会返回 false
-
整个 && 表达式会返回 false
-
函数最终返回 false
8.isEdit判断
当点击编辑的时候会把row传给ctx.record，然后add组件通过组件标签的:record="ctx.record"，会得到这个值，然后isEdit的返回结果为true,下面的计算属性就会执行编辑相关的操作，点击新增的时候，没有row，这个ctx.record为null,所以record.id为undefied,这个isEdit返回结果为false,执行：后的操作
