jdk1.8+vue elementui实现多级菜单功能


Posted in Javascript onSeptember 24, 2020

前言:在学习谷粒商城的时候,在做分类维护树形菜单维护的功能中,项目中只讲了菜单三级树怎么实现,想拓展一下多级菜单,功能已实现,记录一下,有不对的地方欢迎指正。

一、后端部分

使用Jdk1.8的新特性Stream和lamada表达式,数据库的框架使用苞米豆的mybatis plus,话不多说,上代码

1. 新建ManyTree类,可封装成工具类

import com.atguigu.gulimall.product.entity.CategoryEntity;
import com.google.common.collect.Lists;
import com.google.common.collect.Maps;
import java.util.List;
import java.util.Map;
public class ManyTree {

 private List<CategoryEntity> rootList; // 根节点对象存放到这里
 private List<CategoryEntity> bodyList; // 其他节点存放到这里,可以包含根节点

 public ManyTree(List<CategoryEntity> rootList, List<CategoryEntity> bodyList) {
  this.rootList = rootList;
  this.bodyList = bodyList;
 }

 public List<CategoryEntity> getTree() { // 调用的方法入口
  if (bodyList != null && !bodyList.isEmpty()) {
   // 声明一个map,用来过滤已操作过的数据
   Map<String, String> map = Maps.newHashMapWithExpectedSize(bodyList.size());
   rootList.forEach(beanTree -> getChild(beanTree, map));
   return rootList;
  }
  return null;
 }

 public void getChild(CategoryEntity beanTree, Map<String, String> map) {
  List<CategoryEntity> childList = Lists.newArrayList();
  bodyList.stream().filter(c -> !map.containsKey(c.getCatId())).filter(c -> c.getParentCid().equals(beanTree.getCatId()))
    .forEach(c -> {
     map.put(String.valueOf(c.getCatId()), String.valueOf(c.getParentCid()));
     getChild(c, map);
     childList.add(c);
    });
  beanTree.setChildren(childList);
 }

}

2. 新建实体CategoryEntity,这里用了lombok,idea安装lombok插件,项目添加lombok的依赖,详细自行百度

import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import java.io.Serializable;
import java.util.List;
import lombok.Data;
/**
 * 商品分类
 * 
 */
@Data
@TableName("pms_category")
public class CategoryEntity implements Serializable {
	private static final long serialVersionUID = 1L;
	/**
	 * 主键id
	 */
	@TableId
	private Long catId;
	/**
	 * 菜单名称
	 */
	private String name;
	/**
	 * 父级菜单ID
	 */
	private Long parentCid;
	/**
	 * 层级,1 2 3层
	 */
	private Integer catLevel;
	/**
	 * 展示状态,可用作逻辑删除
	 */
	private Integer showStatus;
	/**
	 * 排序字段
	 */
	private Integer sort;
	/**
	 * 展示图标
	 */
	private String icon;
	private String productUnit;
	private Integer productCount;
	//这个注解的含义是在数据库表中不存在
	/**
	 * 用于装载子菜单children
	 */
	@TableField(exist=false)
	private List<CategoryEntity> children;
}

3. 业务层新建service,这里只贴service实现层的代码

/**
  * 递归查询树形菜单数据逻辑已经抽取出来,
  * 这里只需要传入两个数据集合即可:1、所有菜单数据,包括根节点以及子节点 2、所有一级菜单数据
  * @return
  */
 @Override
 public List<CategoryEntity> getAllTree() {
  //使用mybatis-plus自带的baseMapper.selectList方法查询出所有
  List<CategoryEntity> bodyList = baseMapper.selectList(null);
  //使用xml查询出所有一级菜单
  List<CategoryEntity> rootList = categoryDao.getRootTree();
  ManyTree utils = new ManyTree(rootList, bodyList);
  List<CategoryEntity> result = utils.getTree();
  return result;
 }

二、前端部分

1. Category.vue

<template>
 <div class>
 <el-tree
  :data="menus"
  :props="defaultProps"
  :expand-on-click-node="false"
  node-key="catId"
  ref="menuTree"
  :show-checkbox="showCheckbox"
 >
  <span class="custom-tree-node" slot-scope="{ node, data }">
  <span>{{ node.label }}</span>
  <span>
   <el-button type="text" size="mini" @click="() => append(data)">增加</el-button>
   <el-button type="text" size="mini" @click="() => edit(data)">修改</el-button>
   <el-button
   v-if="node.childNodes.length==0"
   type="text"
   size="mini"
   @click="() => remove(node, data)"
   >删除</el-button>
  </span>
  </span>
 </el-tree>
 </div>
</template>
<script>
//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
//例如:import 《组件名称》 from '《组件路径》';
export default {
 //import引入的组件需要注入到对象中才能使用
 components: {},
 data() {
 //这里存放数据
 return {
  //菜单栏数据
  menus: [],
  defaultProps: {
		//与后端实体中封装的子节点名称对应
  children: "children",
  label: "name"
  },
  showCheckbox:true
 };
 },
 //监听属性 类似于data概念
 computed: {},
 //监控data中的数据变化
 watch: {},
 //方法集合
 methods: {
 // 获取菜单数据
 getMenus() {
  this.$http({
  url: this.$http.adornUrl("/product/category/list/tree"),
  method: "get"
  }).then(({ data }) => {
  //console.log("获取菜单数据的data:" + data.data);
  this.menus = data.data;
  });
 },
 edit(data){
 },
 append(data) { 
 },
 //移除节点方法
 remove(node, data) { 
 }
 },
 //生命周期 - 创建完成(可以访问当前this实例)
 created() {
 this.getMenus();
 },
 //生命周期 - 挂载完成(可以访问DOM元素)
 mounted() {},
 beforeCreate() {}, //生命周期 - 创建之前
 beforeMount() {}, //生命周期 - 挂载之前
 beforeUpdate() {}, //生命周期 - 更新之前
 updated() {}, //生命周期 - 更新之后
 beforeDestroy() {}, //生命周期 - 销毁之前
 destroyed() {}, //生命周期 - 销毁完成
 activated() {} //如果页面有keep-alive缓存功能,这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
</style>

2. 展示效果

jdk1.8+vue elementui实现多级菜单功能

三、数据库

1. 建表sql

CREATE TABLE `pms_category` (
 `cat_id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '分类id',
 `name` char(50) DEFAULT NULL COMMENT '分类名称',
 `parent_cid` bigint(20) DEFAULT NULL COMMENT '父分类id',
 `cat_level` int(11) DEFAULT NULL COMMENT '层级',
 `show_status` tinyint(4) DEFAULT NULL COMMENT '是否显示[0-不显示,1显示]',
 `sort` int(11) DEFAULT NULL COMMENT '排序',
 `icon` char(255) DEFAULT NULL COMMENT '图标地址',
 `product_unit` char(50) DEFAULT NULL COMMENT '计量单位',
 `product_count` int(11) DEFAULT NULL COMMENT '商品数量',
 PRIMARY KEY (`cat_id`)
) ENGINE=InnoDB AUTO_INCREMENT=1450 DEFAULT CHARSET=utf8mb4 COMMENT='商品分类';

2. 模拟数据
可以自己造些数据,有需要的数据可以云盘拿,懒得摘了!
链接: https://pan.baidu.com/s/1Brt8682D3ydvorEWhgEUEA 提取码: kkjx

到此这篇关于jdk1.8+vue elementui实现多级菜单功能的文章就介绍到这了,更多相关vue elementui实现多级菜单内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Javascript调试工具(下载)
Jan 09 Javascript
JQuery1.4+ Ajax IE8 内存泄漏问题
Oct 15 Javascript
jQuery实现类似淘宝购物车全选状态示例
Jun 26 Javascript
Javascript实现获取及设置光标位置的方法
Jul 21 Javascript
javascript实现类似百度分享功能的方法
Jul 27 Javascript
jquery自定义表格样式
Nov 23 Javascript
jquery遍历函数siblings()用法实例
Dec 24 Javascript
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
Jul 24 Javascript
可输入文字查找ajax下拉框控件 ComBox的实现方法
Oct 25 Javascript
javascript实现的图片预览功能
Mar 25 Javascript
用element的upload组件实现多图片上传和压缩的示例代码
Feb 12 Javascript
VUE解决跨域问题Access to XMLHttpRequest at
May 06 Vue.js
vue实现日历表格(element-ui)
Sep 24 #Javascript
从零开始用webpack构建一个vue3.0项目工程的实现
Sep 24 #Javascript
.netcore+vue 实现压缩文件下载功能
Sep 24 #Javascript
vue-router 控制路由权限的实现
Sep 24 #Javascript
vue+elementUI实现简单日历功能
Sep 24 #Javascript
JavaScript获取时区实现过程解析
Sep 24 #Javascript
小程序点餐界面添加购物车左右摆动动画
Sep 23 #Javascript
You might like
PHP版本升级到7.x后wordpress的一些修改及wordpress技巧
2015/12/25 PHP
一个简单安全的PHP验证码类、PHP验证码
2016/09/24 PHP
jQuery使用手册之三 CSS操作
2007/03/24 Javascript
jQuery创建插件的代码分析
2011/04/14 Javascript
TreeView 用法(有代码)(asp.net)
2011/07/15 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
2015/06/06 Javascript
JavaScript学习小结(一)——JavaScript入门基础
2015/09/02 Javascript
JavaScript函数节流概念与用法实例详解
2016/06/20 Javascript
JavaScript正则表达式替换字符串中图片地址(img src)的方法
2017/01/13 Javascript
Nodejs模块载入运行原理
2018/02/23 NodeJs
vue.js单文件组件中非父子组件的传值实例
2018/09/13 Javascript
jQuery操作cookie的示例代码
2019/06/05 jQuery
深入理解基于vue-cli的webpack打包优化实践及探索
2019/10/14 Javascript
JS实现移动端双指缩放和旋转方法
2019/12/13 Javascript
node crawler如何添加promise支持
2020/02/01 Javascript
JQuery复选框全选效果如何实现
2020/05/08 jQuery
[02:37]2015国际邀请赛选手档案—LGD.Xiao8
2015/07/28 DOTA
[04:23]DOTA2上海特锦赛小组赛第一日 TOP10精彩集锦
2016/02/27 DOTA
[51:14]LGD vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.21
2018/08/22 DOTA
python进阶之多线程对同一个全局变量的处理方法
2018/11/09 Python
解决pandas展示数据输出时列名不能对齐的问题
2019/11/18 Python
北美个性化礼品商店:Things Remembered
2018/06/12 全球购物
新西兰航空中国官网:Air New Zealand China
2018/07/24 全球购物
SIDESTEP荷兰:在线购买鞋子
2019/11/18 全球购物
YSL圣罗兰美妆俄罗斯官网:Yves Saint Lauret RU
2020/09/23 全球购物
讲座主持词
2014/03/20 职场文书
公司授权委托书
2014/04/04 职场文书
模具专业求职信
2014/06/26 职场文书
群众路线剖析材料怎么写
2014/10/09 职场文书
综合办公室岗位职责
2015/04/11 职场文书
单位工资证明范本
2015/06/12 职场文书
2015年学校教科室工作总结
2015/07/20 职场文书
高考百日冲刺决心书
2015/09/23 职场文书
三好学生评选事迹材料(2016精选版)
2016/02/25 职场文书
PHP中strval()函数实例用法
2021/06/07 PHP
零基础学java之带返回值的方法的定义和调用
2022/04/10 Java/Android