vue-admin-template员工管理之删除

1.添加行内删除按钮

            <template v-slot="{ row }">
              <el-button size="mini" type="text">查看</el-button>
              <el-button size="mini" type="text">角色</el-button>
              <el-popconfirm
                title="确认删除该行数据吗？"
                @onConfirm="confirmDel(row.id)"
              >
                <el-button slot="reference" style="margin-left:10px" size="mini" type="text">删除</el-button>
              </el-popconfirm>

            </template>

2.添加删除方法

// 删除员工方法
async confirmDel(id) {
    await delEmployee(id)
    if (this.list.length === 1 && this.queryParams.page > 1) this.queryParams.page--
    this.getEmployeeList()
    this.$message.success('删除员工成功')
}

3.api.js

    /**
     * 删除员工
     * **/

    export function delEmployee(id) {
    return request({
            method: 'delete',
            url: `/employee/${id}`
  })
}

4.后端

@DeleteMapping("/{id}")
public Result<String> delete(HttpServletRequest request,@PathVariable String id){

    employeeService.removeById(id);

    return Result.success("用户删除成功");
}