封装删除接口,注册下拉菜单事件
首先,封装删除功能模块 src/api/departments.js
/** * * 根据id根据部门 接口是根据restful的规则设计的 删除 delete 新增 post 修改put 获取 get * **/ export function delDepartments(id) { return request({ url: `/company/department/${id}`, method: 'delete' }) }
然后,在tree-tools组件中,监听下拉菜单的点击事件 src/views/departments/index.vue
<el-dropdown @command="operateDepts"> <span> 操作<i class="el-icon-arrow-down" /> </span> <!-- 下拉菜单 --> <el-dropdown-menu slot="dropdown"> <el-dropdown-item command="add">添加子部门</el-dropdown-item> <!-- 编辑部门和删除部门只会在子节点上显示 --> <el-dropdown-item v-if="!isRoot" command="edit">编辑部门</el-dropdown-item> <el-dropdown-item v-if="!isRoot" command="del">删除部门</el-dropdown-item> </el-dropdown-menu> </el-dropdown>
dropdown下拉菜单的监听事件command
// 操作节点调用的方法 operateDepts(type) { if (type === 'add') { // 添加子部门的操作 } else if (type === 'edit') { // 编辑部门的操作 } else { // 删除操作 } }
调用删除接口,通知父组件更新数据
删除之前,提示用户是否删除,然后调用删除接口
// 操作节点调用的方法 operateDepts(type) { if (type === 'add') { // 添加子部门的操作 } else if (type === 'edit') { // 编辑部门的操作 } else { // 删除操作 this.$confirm('确定要删除该部门吗').then(() => { // 如果点击了确定就会进入then return delDepartments(this.treeNode.id) // 返回promise对象 }).then(() => { // 如果删除成功了 就会进入这里 }) } }
上面代码中,我们已经成功删除了员工数据,但是怎么通知父组件进行更新呢
在前面的课程中,我们已经学习过可以通过自定义事件this.$emit
的方式来进行
// 如果删除成功了 就会进入这里 this.$emit('delDepts') // 触发自定义事件