61-尚硅谷-硅谷通用权限项目-用户管理前端-用户修改和删除

大家好，最后呢，咱们完成用户的修改以及删除功能，首先我们先看修改，修改怎么做呢？两步，第一步点修改，根据ID查询，然后在表单中进行数据回显，咱们改完数据点确定，最终去改数据库中的内容，所以修改应该是两步操作，那咱们来快速写一下，首先第一个我们找到修改按钮是在这个位置，然后传入当前这条记录的，它的方法叫ED，那咱们来写一下第一个方法我写到下边。就是第一个。根据ID查询进行数据的灰显。E传入ID。然后在里边我们调用API中刚才定义的方法，根据ID查询，咱们找一下get user ID。

里边传入ID。咱们response得到我们最终这个数据。然后最终我们做个赋值，这次点ss user等于response.data，所以现在我们的第一部分完成，根据ID查询进行数据回显，咱们试一下啊，是咱以第一个为例，大家注意看啊，我点修改按钮。咱们看一点咱发现啊，这是没有出来，因为咱代码中注意啊，我是不是少写一步，你修改的话，其实我已经查了，但是咱是不是要弹框显示啊，所以现在我们要弹出一个框。这次点dialo visible等于true，然后下面就是调用接口查询，那咱们再试一下啊，刚才少写这个步骤，咱再试一下点修改。

数据是不是显示了，比如说咱们再试一个点修改是不是也显示了，我再试一个这些是不是都正确，所以以上第一部分完成，然后第二步呢，点确定，最终修改这个确定方法，刚才咱们写过就是它，所以咱们最后就直接写修改方法就可以了，我们写一下啊修改方法调用API中的这个方法咱们找到。它叫update方法。R中传入我们这个对象。然后加上点赞。箭头函数这样的话就完成了修改，然后修改之后跟添加应该是一样的，所以我把添加里面那步骤直接复制，咱们改一下就可以了，大家看啊，第一步提示，第二步关弹框，第三步刷新页面，以上就是修改到最终实现。

实现之后，最后咱们把效果试一下，这个效果啊，咱就以第一个为例，我点修改弹框显示，那比如说我在里边啊，就加上这么一个，比如at硅加上这么一个就是。中国，然后咱们点确定，大家看数据是不是对应修改，包括啊咱可以再设个添加，添加的话呢，我就写上一个test了，咱为了方便测试就叫test。点确定，大家看这个是不是也有错，比如说你添加修改，咱经过测试，目前应该是都正确了。修改之后呢，最后咱把删除进行实现，那咱们快速写一下啊删，首先我们调的方法，这个方法remove data摆地。我在下面把这方法咱们进行创建，删除的这个方法。

然后创建之后里边实现具体功能。首先我们入ID，然后调用API的方法进行实现，但是删除呢，因为它里面啊，需要有这么一个确认框的效果，咱们到之前里边找一下，用它改一下这个效果。我们来找一下，应该是在我们之前角色中的这个地方。我把这个直接复制过来，然后给它改一下。咱们进来，然后大家看啊，首先提示。咱们改成删除该用户。点确定执行ZZ里边呢，调用方法，方法咱的刚才写的名字就叫白地。传入ID址，最终提示删除成功，并且刷新页面，所以这个应该就很简单了，跟之前都类似，也就说到这里，咱就把用户的增删改查的前端就出来了，最后我们试一下这个删除功能，咱就删第一条记录大家看啊，我点删除按钮，弹个框取消，什么都不做而点确定。

提示我们成功，并且数据已经删掉了，比如说咱可以再删一个，我把这里这条记录删掉，目前是五条记录，咱们删除确定。变成了是不是四条现在。用户的增删改查前端我们就都完成了。