1.页面显示删除按钮：
（1）使用ElementUI中的scoped slot样式实现删除tree节点：在<el-tree>标签中加入span标签中的代码实现：
<el-tree
:data="menus"
:props="defaultProps"
:expand-on-click-node="false">
<span class="custom-tree-node" slot-scope="{ node, data }">
<span>{
{ node.label }}</span>
<span>
<el-button type="text" size="mini" @click="() => append(data)"> Append </el-button>
<el-button type="text" size="mini" @click="() => remove(node, data)"> Delete </el-button>
</span>
</span>
</el-tree>（2）在方法中加入两个方法：
append(data) {
console.log(data);
},
remove(node, data) {
console.log(node,data)
},（3）设置点击节点不自动收缩：（在el-tree标签中添加）
:expand-on-click-node="false"（4）菜单没有子菜单时才显示delete按钮，只有菜单是一级或二级菜单时才显示append按钮：
当node.level<=2时显示append
当node.childNodes.length==0时才显示delete
<el-button v-if="node.level<=2" type="text" size="mini" @click="() => append(data)"> Append </el-button>
<el-button v-if="node.childNodes.length==0" type="text" size="mini" @click="() => remove(node, data)"> Delete </el-button>（5）批量选择功能：（在el-tree标签中添加）
show-checkbox(6)el-tree标签中一定要设置node-key，这是每个节点的唯一标识：
node-key="catId"2.发送请求实现删除：
（1）采用postman测试删除接口：
（2）注掉原来生成的方法，自定义删除方法：
/**
* 删除
* 只有post请求才有请求体，get请求是没有请求体的
* @RequestBody:获取请求体中的数据，必须发送POST请求
* springmvc自动讲请求体中的数据（json）,转为对应的对象。
*/
@RequestMapping("/delete")
public R delete(@RequestBody Long[] catIds){
// categoryService.removeByIds(Arrays.asList(catIds));
//1.检查当前删除的菜单，是否被别的地方引用
categoryService.removeMenusByIds(Arrays.asList(catIds));
return R.ok();
} void removeMenusByIds(List<Long> asList);
@Override
public void removeMenusByIds(List<Long> asList) {
//TODO 检查当前删除的菜单，是否被别的地方引用
//逻辑删除
baseMapper.deleteBatchIds(asList);
}（3）使用逻辑删除的步骤：
在yml文件中进行配置;
#告诉Mybatis-plus，sql映射文件位置
mybatis-plus:
mapper-locations: classpath:/mapper/**/*.xml
#定义实体类主键生成规则
global-config:
db-config:
id-type: auto
#未删除标志位为0
logic-not-delete-value: 0
#已删除标志位为1
logic-delete-value: 1给需要配置逻辑删除的属性加注解：（代表着是逻辑删除字段）因为前面的yml文件配反了，所以在@TableLogic注解中也可以重新定义删除和不删除的标志数(value = "1",delval = "0")。
/**
* 是否显示[0-不显示，1显示]
*/
@TableLogic(value = "1",delval = "0")
private Integer showStatus;（4）重启项目，测试逻辑删除：
将日志级别全部设置为debug级别：（这样dao层也会打印日志）就能查看到相关sql语句。
logging:
level:
com.atguigu.gulimail: debug
（5）在前端发送post请求：
remove(node, data) {
var ids = [data.catId];
this.$http({
url: this.$http.adornUrl('/product/category/delete'),
method: 'post',
data: this.$http.adornData(ids,false)
}).then(({data}) => {
console.log("删除成功...：");
})
},删除成功后重新请求菜单：
}).then(({data}) => {
console.log("删除成功...");
this.getMenus();
});
删除前加入提示框：
remove(node, data) {
var ids = [data.catId];
this.$confirm(`是否删除【${data.name}】菜单`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$http({
url: this.$http.adornUrl('/product/category/delete'),
method: 'post',
data: this.$http.adornData(ids,false)
}).then(({data}) => {
console.log("删除成功...");
this.getMenus();
});
}).catch(() => {
});
}删除成功后加一条成功的消息提示框：
}).then(({data}) => {
this.$message({
message: '菜单删除成功',
type: 'success'
});
his.getMenus();
});删除后保持打开当前父菜单：
在删除成功后的方法中加入：
this.getMenus();
//设置需要默认展开的菜单
this.expendedKey = [node.parent.data.catId]在el-tree标签中加入：
:default-expanded-keys="expendedKey在data参数值中加入：
expendedKey: [],