一:页面效果
1.打开elementUI官网
https://element.eleme.cn/#/zh-CN/component/tree
复制tree组件相关代码
<template>
<div>
<el-tree :data="menus" :props="defaultProps" :expand-on-click-node="false" show-checkbox node-key="catId">
<span class="custom-tree-node" slot-scope="{ node, data }">
<span>{{ node.label }}</span>
<span>
<el-button type="text" size="mini" @click="() => append(data)" v-if="node.level<=2">Append</el-button>
<el-button type="text" size="mini" @click="() => remove(node, data)" v-if="node.childNodes.length == 0">Delete</el-button>
</span>
</span>
</el-tree>
</div>
</template>
<script>
//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
//例如:import 《组件名称》 from '《组件路径》';
export default {
//import引入的组件需要注入到对象中才能使用
components: {},
props: {},
data() {
return {
menus: [],
defaultProps: {
children: "children",
label: "name"
}
};
},
//计算属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
/**
* 获取三级菜单数据
*/
getMenus() {
this.$http({
url: this.$http.adornUrl("/product/category/list/tree"),
method: "get"
}).then(({ data }) => {
console.log("成功获取到菜单数据...", data.data);
this.menus = data.data;
});
},
/**
* 添加节点
*/
append(data) {
console.log("append",data);
},
/**
* 移除节点
*/
remove(node, data) {
console.log("remove",node,data);
},
},
//生命周期 - 创建完成(可以访问当前this实例)
created() {
this.getMenus();
},
//生命周期 - 挂载完成(可以访问DOM元素)
mounted() {},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {} //如果页面有keep-alive缓存功能,这个函数会触发
};
</script>
<style scoped>
</style>
2.说明
1)slot-scope=“{ node, data }”
node表示的是节点信息,data表示节点数据
2)v-if=“node.level<=2”
菜单只有三级,所以只要字节点处于一级或者二级,就可以进行添加菜单。
3)v-if=“node.childNodes.length == 0”
因为子节点是一个数组,所以当子节点的数组长度为0时,就显示删除菜单
4):expand-on-click-node=“false”
当为false时,只有点击箭头才会下拉下级菜单
5)show-checkbox
添加选择框,实现批量删除功能
6)node-key=“id”
每颗树节点用来作为唯一标识,整棵树是唯一的
二:后台接口实现
1.打开CategoryController文件
- @RequestBody:获取请求体,只有post请求才会发送请求体,必须发送post请求
- SpringMVC会自动将请求体的数据(json),转化为对应的对象
/**
* 删除
* @RequestBody:获取请求体,只有post请求才会发送请求体,必须发送post请求
* SpringMVC会自动将请求体的数据(json),转化为对应的对象
*/
@RequestMapping("/delete")
//@RequiresPermissions("product:category:delete")
public R delete(@RequestBody Long[] catIds){
categoryService.removeByIds(Arrays.asList(catIds));
return R.ok();
}
2.使用postman进行接口测试
post请求
localhost:88/api/product/category/delete
3.接口功能完善
1)在CategoryController添加delete方法
/**
* 删除
* @RequestBody:获取请求体,只有post请求才会发送请求体,必须发送post请求
* SpringMVC会自动将请求体的数据(json),转化为对应的对象
*/
@RequestMapping("/delete")
//@RequiresPermissions("product:category:delete")
public R delete(@RequestBody Long[] catIds){
//1.检查当前删除的菜单,是否被别的地方调用
categoryService.removeMenuByIds(Arrays.asList(catIds));
return R.ok();
}
2)在CategoryService添加removeMenuByIds方法
/**
* 多选删除菜单
* @param asList
*/
void removeMenuByIds(List<Long> asList);
3)在CategoryServiceImpl实现removeMenuByIds方法
/**
* 批量删除
* @param asList
*/
@Override
public void removeMenuByIds(List<Long> asList) {
//todo 1.检查当前删除的菜单,是否被别的地方调用
//逻辑删除
baseMapper.deleteBatchIds(asList);
}
4.逻辑删除
1)配置全局的逻辑删除规则
在application.yml加入配置
#mybatis-plus映射位置
#classpath*,表示扫描本微服务和其他微服务
mybatis-plus:
mapper-locations: classpath*:/mapper/**/*.xml
#设置id主键自增
global-config:
db-config:
id-type: auto
#逻辑删除
logic-delete-value: 1 # 逻辑已删除值(默认为 1)
logic-not-delete-value: 0 # 逻辑未删除值(默认为 0)
2)给CategoryEntity实体类加上逻辑删除注解@TableLogic
/**
* 是否显示[0-不显示,1显示]
* @TableLogic:代表这是一个逻辑删除字段
*/
@TableLogic(value = "1",delval = "0")
private Integer showStatus;
3)给application.yml文件添加debug日志配置
#debug日志
logging:
level:
com.sysg.gulimail: debug
4)用postman测试以后打印sql
localhost:88/api/product/category/delete
UPDATE pms_category SET show_status=0 WHERE cat_id IN ( 1431 )
三:前端功能实现
1.在category.vue中添加remove方法
/**
* 移除节点
*/
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}) => {
//刷新页面
this.getMenus();
})
console.log("remove",node,data);
},
2.在删除之前弹框提示
/**
* 移除节点
*/
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}) => {
//刷新页面
this.getMenus();
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
3.在删除之前弹框提示
在回调函数中添加执行成功函数
this.$message({
message: '菜单删除成功',
type: 'success'
});
4.删除成功后继续打开子节点,而不是折叠起来
1)在el-tree标签中添加**:default-expanded-keys = “expandedKey”**
expandedKey表示默认展开的数组
2)在data数据绑定中添加expandedKey:[],
3)在删除成功的方法里为expandedKey赋值,取要删除节点的父节点赋值给expandedKey。
//设置出需要默认展开的菜单
this.expandedKey = [node.parent.data.catId];
4)category.vue所有方法
<template>
<div>
<el-tree :data="menus" :props="defaultProps" :expand-on-click-node="false" :default-expanded-keys = "expandedKey"
show-checkbox node-key="catId">
<span class="custom-tree-node" slot-scope="{ node, data }">
<span>{{ node.label }}</span>
<span>
<el-button type="text" size="mini" @click="() => append(data)" v-if="node.level<=2">Append</el-button>
<el-button type="text" size="mini" @click="() => remove(node, data)" v-if="node.childNodes.length == 0">Delete</el-button>
</span>
</span>
</el-tree>
</div>
</template>
<script>
//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
//例如:import 《组件名称》 from '《组件路径》';
export default {
//import引入的组件需要注入到对象中才能使用
components: {},
props: {},
data() {
return {
menus: [],
//默认展开的数组
expandedKey:[],
defaultProps: {
children: "children",
label: "name"
}
};
},
//计算属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
/**
* 获取三级菜单数据
*/
getMenus() {
this.$http({
url: this.$http.adornUrl("/product/category/list/tree"),
method: "get"
}).then(({ data }) => {
console.log("成功获取到菜单数据...", data.data);
this.menus = data.data;
});
},
/**
* 添加节点
*/
append(data) {
console.log("append",data);
},
/**
* 移除节点
*/
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}) => {
this.$message({
message: '菜单删除成功',
type: 'success'
});
//刷新页面
this.getMenus();
//设置出需要默认展开的菜单
this.expandedKey = [node.parent.data.catId];
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
},
//生命周期 - 创建完成(可以访问当前this实例)
created() {
/**
* 加载页面的时候查询三级菜单
*/
this.getMenus();
},
//生命周期 - 挂载完成(可以访问DOM元素)
mounted() {},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {} //如果页面有keep-alive缓存功能,这个函数会触发
};
</script>
<style scoped>
</style>
5.把逻辑删除的菜单恢复出来
update pms_category set show_status = 1
四:批量删除功能实现
1.添加批量删除按钮
<el-button type="danger" @click="batchDelete">危险按钮</el-button>
2.获取当前选中的节点
1)getCheckedNodes
- 若节点可被选择(即 show-checkbox 为 true),则返回目前被选中的节点所组成的数组
- (leafOnly, includeHalfChecked) 接收两个 boolean 类型的参数,1. 是否只是叶子节点,默认值为 false 2. 是否包含半选节点,默认值为 false
2)在el-tree中添加ref = “menuTree”,用来选中tree中的所有组件
3)添加batchDelete批量删除方法
/**
* 批量删除方法
*/
batchDelete(){
let catIds = [];
let checkedNodes = this.$refs.menuTree.getCheckedNodes();
for(let i = 0 ; i < checkedNodes.length ; i ++){
let catId = checkedNodes[i].catId;
catIds.push(catId);
}
//发送post请求提交删除的id
this.$confirm(`是否批量删除菜单?`, "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
this.$http({
url: this.$http.adornUrl("/product/category/delete"),
method: "post",
data: this.$http.adornData(catIds, false),
}).then(({ data }) => {
this.$message({
message: "菜单删除成功",
type: "success",
});
//刷新页面
this.getMenus();
});
})
.catch(() => {
this.$message({
type: "info",
message: "已取消删除",
});
});
},
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/84136.html