动态树+数据表格+分页

原创

已于 2022-05-14 16:13:11 修改 · 379 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #javascript

于 2022-05-14 16:12:15 首次发布

1. 后台数据

2. 动态生成NavMenu导航菜单(只支持2级菜单 2.1 结构

1. 后台数据

DROP TABLE IF EXISTS `t_book_vue`;

CREATE TABLE `t_book_vue` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `bookname` varchar(50) NOT NULL,
  `price` float NOT NULL,
  `booktype` varchar(40) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=34 DEFAULT CHARSET=utf8 COMMENT='书本信息表';

/*Data for the table `t_book_vue` */

insert  into `t_book_vue`(`id`,`bookname`,`price`,`booktype`) values (1,'西游记',100.02,'名著'),(2,'红楼梦',110.08,'名著'),(3,'三国演义',121.12,'名著'),(4,'遮天',130.9,'玄幻'),(5,'凡人修仙传',200,'修仙'),(6,'倚天屠龙记',150.16,'武侠'),(7,'斗破苍穹',115.07,'玄幻'),(8,'超级兵王',145,'言情'),(9,'武极天下',45.55,'玄幻'),(10,'聊斋志异',100.12,'玄幻'),(11,'永生',110.11,'玄幻'),(12,'武动乾坤',90.89,'玄幻'),(13,'完美世界',100,'玄幻'),(14,'万域之王',56.5,'玄幻'),(15,'西游记',100.02,'名著'),(16,'红楼梦',110.08,'名著'),(17,'三国演义',121.12,'名著'),(18,'遮天',130.9,'玄幻'),(19,'凡人修仙传',200,'修仙'),(20,'倚天屠龙记',150.16,'武侠'),(21,'斗破苍穹',115.07,'玄幻'),(22,'超级兵王',145,'言情'),(23,'武极天下',45.55,'玄幻'),(24,'聊斋志异',100.12,'玄幻'),(25,'永生',110.11,'玄幻'),(26,'武动乾坤',90.89,'玄幻'),(27,'完美世界',100,'玄幻'),(28,'万域之王',56.5,'玄幻'),(32,'Java',1000,'修仙'),(33,'娃哈哈',100,'玄幻');



DROP TABLE IF EXISTS `t_module_vue`;

CREATE TABLE `t_module_vue` (
  `id` int(11) NOT NULL COMMENT '唯一标识',
  `pid` int(11) NOT NULL COMMENT '父ID',
  `text` varchar(50) NOT NULL,
  `icon` varchar(30) DEFAULT NULL,
  `url` varchar(50) DEFAULT NULL,
  `sort` int(11) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

insert  into `t_module_vue`(`id`,`pid`,`text`,`icon`,`url`,`sort`) values (10,-1,'书本管理','el-icon-notebook-2','',1),(11,-1,'订单管理','el-icon-s-order','',2),(12,-1,'系统管理','el-icon-setting','',3),(1001,10,'新增书本',NULL,'/book/AddBook',4),(1002,10,'书本管理',NULL,'/book/BookList',5),(1101,11,'订单管理','','/OrderList',6),(1102,11,'订单统计',NULL,'/OrderStatistics',7),(1201,12,'用户管理',NULL,'/UserManager',8),(1202,12,'权限管理',NULL,'/AuthManager',10),(1203,12,'字典管理',NULL,'/DictList',11);

DROP TABLE IF EXISTS `t_user_vue`;

CREATE TABLE `t_user_vue` (
  `id` varchar(36) NOT NULL COMMENT '唯一标识',
  `username` varchar(40) NOT NULL COMMENT '登录账号',
  `password` varchar(40) NOT NULL COMMENT '登录密码',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

/*Data for the table `t_user_vue` */

/*!40101 SET SQL_MODE=@OLD_SQL_MODE */;
/*!40014 SET FOREIGN_KEY_CHECKS=@OLD_FOREIGN_KEY_CHECKS */;

2. 动态生成NavMenu导航菜单(只支持2级菜单
2.1 结构

 <el-menu key="" index="">
        <el-submenu>
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>导航一</span>
          </template>
          <template slot="title">分组一</template>
          <el-menu-item route="">

最低0.47元/天解锁文章