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: [],