elementui树状菜单tree_Java + Element-UI 实现简单的树形菜单

一、简单入门级树形菜单实现(纯后台逻辑)

1、简介

(1)开发环境

IDEA + JDK1.8 + mysql 1.8

SpringBoot 2.2.6 + mybatis-plus

此处仅后台开发(返回 json 数据)，前台页面展示后续会讲解。

(2)数据表

如下，仅供参考，可以添加 修改时间、创建时间、逻辑删除等字段。

DROP DATABASE IF EXISTS test;

CREATE DATABASE test;

USE test;/*用于测试 树形的菜单(以商品为例)*/CREATE TABLE tree_menu(

menu_id bigint NOT NULL AUTO_INCREMENT COMMENT"当前菜单ID",

namechar(50) COMMENT "菜单名",

parent_menu_id bigint COMMENT"当前菜单的父菜单 ID",

meun_levelint COMMENT "当前菜单的层级",

sortint COMMENT "排序",

PRIMARY KEY (menu_id)

) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT="树形菜单";

(3)插入测试数据

为了数据直观显示，如下插入数据，每段数据代表一个菜单栏。

注：

parent_menu_id 从 0 开始，0 表示第一级菜单(没有父菜单)。

meun_level 从 1 开始，1 表示第一级菜单，2 表示第二级菜单。

INSERT INTO tree_menu(menu_id, name, parent_menu_id, meun_level, sort)

VALUES

(1, '厨具', 0, 1, 0),

(2, '刀具', 1, 2, 0),(3, '烹饪工具', 1, 2, 0),(4, '餐具', 1, 2, 0),

(5, '菜刀', 2, 3, 0),(6, '剪刀', 2, 3, 0),(7, '水果刀', 2, 3, 0),

(8, '炒菜锅', 3, 3, 0),(9, '压力锅', 3, 3, 0),(10, '平底锅', 3, 3, 0),

(11, '筷子', 4, 3, 0),(12, '碗', 4, 3, 0),(13, '果盘', 4, 3, 0),

(14, '家用电器', 0, 1, 0),

(15, '大家电', 14, 2, 0),(16, '生活家电', 14, 2, 0),

(17, '电视', 15, 3, 0),(18, '电脑', 15, 3, 0),(19, '洗衣机', 15, 3, 0),(20, '冰箱', 15, 3, 0),

(21, '电风扇', 16, 3, 0),(22, '吸尘器', 16, 3, 0),(23, '饮水机', 16, 3, 0),(24, '加湿器', 16, 3, 0),

(25, '数码', 0, 1, 0),

(26, '摄像摄影', 25, 2, 0),(27, '影音娱乐', 25, 2, 0),(28, '教育学习', 25, 2, 0),

(29, '数码相机', 26, 3, 0),(30, '单反相机', 26, 3, 0),(31, '摄像机', 26, 3, 0),(32, '拍立得', 26, 3, 0),

(33, 'MP3/MP4/MP5/PSP', 27, 3, 0),(34, '音箱', 27, 3, 0),(35, '麦克风', 27, 3, 0),

(36, '学生平板', 28, 3, 0),(37, '复读机', 28, 3, 0),(38, '电子辞典', 28, 3, 0),(39, '点读机', 28, 3, 0)

2、构建基本开发环境