Vue中动态树形菜单，以及

🏅我是默，一个在CSDN分享笔记的博主。📚📚

🌟在这里，我要推荐给大家我的专栏《Vue》。🎯🎯

🚀无论你是编程小白，还是有一定基础的程序员，这个专栏都能满足你的需求。我会用最简单易懂的语言，带你走进Vue的世界，让你从零开始，一步步成为JAVA大师。🚀🏆

🌈让我们在Vue的世界里畅游吧！🌈

🎁如果感觉还不错的话请记得给我点赞哦！🎁🎁

💖期待你的加入，一起学习，一起进步！💖💖

一.动态树形菜单

绑定数据

	export default {data(){return{collapsed:false,menus:[]};},created() {this.$root.Bus.$on('aaa',v=>{this.collapsed=v;});//获得动态数据let  url=this.axios.urls.SYSTEM_MENUS;this.axios.get(url,{}).then(r=>{console.log(r);this.menus=r.data.rows;}).catch(e=>{})}}

.前端导航菜单绑定

菜单结构

<el-menu   router :default-active="$route.path"     default-active="2" class="el-menu-vertical-demo" background-color="#334157"text-color="#fff" active-text-color="#ffd04b" :collapse="collapsed"><!-- <el-menu default-active="2" :collapse="collapsed" collapse-transition router :default-active="$route.path" unique-opened class="el-menu-vertical-demo" background-color="#334157" text-color="#fff" active-text-color="#ffd04b"> --><div class="logobox"><img class="logoimg" src="../assets/img/logo.png" alt=""></div><el-submenu  v-for="m  in  menus"  :index="'idx_'+m.id"  :key="'key_'+m.id"><template slot="title"><i :class="m.icon"></i><span>{{m.text}}</span></template><el-menu-item v-for="m2  in  m.modules"  :index="m2.url"  :key="'key_'+m2.id"><i :class="m2.icon"></i><span>{{m2.text}}</span></el-menu-item></el-submenu></el-menu>

第一级节点el-submenu中key属性唯一，index属性唯一，而index属性用于控制菜单折叠；第二级节点el-menu-item中key属性唯一，index属性唯一，而index属性用于控制页面跳转；

vue+element的el-menu组件实现路由跳转及当前项的设置

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

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

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

配置路由关系

/*** 对后台请求的地址的封装，URL格式如下：* 模块名_实体名_操作*/
export default {'SERVER': 'http://localhost:8080/ssm', //服务器'SYSTEM_USER_DOLOGIN': '/user/userLogin', //登陆'SYSTEM_USER_DOREG': '/user/userRegister', //注册'SYSTEM_MENUS': '/module/queryRootNode', //菜单树'getFullPath': k => { //获得请求的完整地址，用于mockjs测试时使用return this.SERVER + this[k];}
}

配置跳转以及包

效果展示

二.数据表格的绑定

1.配置路由关系

   'BOOK_LIST': '/book/queryBookPager', //绑定书籍

2.编写输入框

  <el-form :inline="true" class="demo-form-inline"><el-form-item label="书籍名字"><el-input v-model="bookname" placeholder="书籍名字"></el-input></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">查询</el-button></el-form-item></el-form>

3.编写表格

 <!-- 数据表格--><el-table :data="tableData"  stripe  style="width: 100%"><el-table-column prop="id" label="书籍编号" width="180"></el-table-column><el-table-column   prop="bookname" label="书籍名字" width="180"></el-table-column><el-table-column    prop="price" label="书籍价格"></el-table-column><el-table-column    prop="booktype" label="书籍类型"></el-table-column></el-table>

4.编写分页条

 <!-- 分页--><div class="block"><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="page":page-sizes="[10, 20, 30, 40]":page-size="rows"layout="total, sizes, prev, pager, next, jumper":total="total"></el-pagination></div>

5.编写方法

  export  default{data(){return  {bookname:'',tableData:[],rows:10,page:1,total:0}},methods:{query(params){//获得动态数据let  url=this.axios.urls.BOOK_LIST;this.axios.get(url,{params:params}).then(r=>{console.log(r);this.tableData=r.data.rows;this.total=r.data.total;}).catch(e=>{})},onSubmit(){let params ={bookname:this.bookname}this. query(params);},handleSizeChange(r){let params ={bookname:this.bookname,rows:r,page:this.page}this. query(params);},handleCurrentChange(p){let params ={bookname:this.bookname,rows:this.rows,page:p}this. query(params);}},created() {this.query({});}}