编辑表单回显
父组件：这里用到了父亲调子组件的方法和同步异步先后方法的处理
//methods里else if (type === 'edit') {this.showDialog = true// 显示弹层this.currentNodeId = id// 记录id，要用它获取数据// 在子组件中获取数据// 父组件调用子组件的方法来获取数据// 这里因为同步异步的问题，需要使用$nextTickthis.$nextTick(() => {this.$refs.addDept.getDepartmentDatail()// this.$refs.addDept等同于子组件的this})}}子组件
// 获取组织的详情async getDepartmentDatail() {this.formData = await getDepartmentDetail(this.currentNodeId)}利用d区分·是编辑还是增加（注意let）
let result = await getDepartment()if (this.formData.id) {result = result.filter(item => item.id !== this.formData.id)}if (result.some(item => item.name === value)) {callback(new Error('已经有了'))} else {callback()}
编辑表单的确认和取消
1.业务逻辑
2.先封装接口， 在用id区分编辑和新增，在调用接口
// 点击确定时调用btnOk() {this.$refs.addDept.validate(async(isOk) => {if (isOk) {// formData里的前四个都有值，最后一个没有，所以把currentNodeId 的值赋给pid// 调用接口一定要记得加await和asyncif (this.formData.id) {// 调用编辑接口,传入数据await updateDepartment(this.formData)} else {// 调用新增接口await addDepartment({ ...this.formData, pid: this.currentNodeId })}
3.通知父组件（这里编辑与新增是相同的）
// 完成await之后，通知父组件更新this.$emit('updateDepartment')4.重置表单，关闭弹层
5.更改提示信息
设置变量 let msg = '新增'
if (isOk) {let msg = '新增'// formData里的前四个都有值，最后一个没有，所以把currentNodeId 的值赋给pid// 调用接口一定要记得加await和asyncif (this.formData.id) {msg = '更新'// 调用编辑接口,传入数据await updateDepartment(this.formData)} else {// 调用新增接口await addDepartment({ ...this.formData, pid: this.currentNodeId })}// 完成await之后，通知父组件更新this.$emit('updateDepartment')// 提示消息this.$message.success(`${msg}+部门成功`)// 提示消息// 调用close方法，重置和关闭表单this.close()6.弹框标题更改
定义了computed
computed: {showTitle() {return this.formData.id ? '编辑部门' : '新增部门'}},给标题绑定
<el-dialog :title="show-title" :visible="showDialog" @close="close">同时置空表单
close() {// 修改父组件的值 子传父this.formData = {code: '', // 部门编码introduce: '',managerId: '',name: '',pid: ''}// 重置表单// resetFields只能重置在模板中绑定的数据this.$refs.addDept.resetFields()// 修改父组件的值，子传父this.$emit('update:showDialog', false)},删除功能
封装api
// 删除·部门·接口·
export function delDepartment(id) {return request({method: 'delete',url: `/company/department/${id}`})
}
调用接口，提示信息，回显，注意使用this
this.$confirm('您确定要删除吗').then(async() => {await delDepartment(id)// 删除成功，弹出提示框this.$message.success('删除部门成功')// 调用方法重新显示数据this.getDepartment()
