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=>{

        })

      }
	}

.前端导航菜单绑定

菜单结构

		
		

			
		
        	
                
        		
                    
                    {{m2.text}}
                
        	
	

第一级节点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.编写输入框

  
       
         
       
       
         查询
       
     

3.编写表格

4.编写分页条

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({});
      }
    }

6.效果展示