编辑表单回显

父组件：这里用到了父亲调子组件的方法和同步异步先后方法的处理

//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()