ElementUI - 主页面--动态树&右侧内容管理

一.左侧动态树

1.定义组件

①样式&数据处理

②数据交互

2.定义组件的和路由的关系

3.效果演示

二.动态路由展示对应界面

注意事项：

①要实现路由跳转，先要在el-menu标签上添加router属性，然后只要在每个el-menu-item标签内的index属性设置一下url即可实现点击el-menu-item实现路由跳转。

②导航当前项，在el-menu标签中绑定 :default-active="$route.path"，注意是绑定属性，不要忘了加“:”，当$route.path等于el-menu-item标签中的index属性值时则该item为当前项。

③el-submenu标签中的url属性不能为空，且不能相同，否则会导致多个节点收缩/折叠效果相同的问题
 

示例：

	用户管理

然后将我们的组件渲染到Appmian.vue上即可

效果展示 ：

三、右侧内容数据表格

1.根据文档搭建页面

首先我们分析一下，我们右侧有那些内容？然后去到我们ELementUI官网查找相对应的案例代码，我们首先需要一个form表单提供我们输入书籍名称进行模糊查询，还需要数据表格展示数据，其次就是底部的分页条来完成分页效果，知道了需求我们直接去找案例代码即可。

BookList.vue

其中  BOOK_LIST 是在action.js中间定义好的，数据表格以及分页条均可在element官网中找到，并且当组件创建时，重写了钩子函数，自动加载数据

后端大家就自己写啦，下面展示一下示例