SPA项目之主页面--动态树&右侧内容管理

Welcome Huihui's Code World ! !

接下来看看由辉辉所写的关于Vue+ElementUI的相关操作吧

目录

Welcome Huihui's Code World ! !

一.左侧动态树

1.定义组件

①样式&数据处理

②后台数据交互

③代码汇总

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

​编辑3.效果演示

二.右侧表格内容&分页

1.定义组件

①样式&数据处理

②后台数据交互

③代码汇总

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

3.效果演示

---

一.左侧动态树

1.定义组件

①样式&数据处理

    
    

      
    


    
      
      
        
        {{m2.text}}
      
    
  

②后台数据交互

③代码汇总

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

3.效果演示

二.右侧表格内容&分页

1.定义组件

①样式&数据处理

    
      
        
      

      
        查询
      
    




    
      
      
      
      
    



    

      
      
    


  

②后台数据交互

③代码汇总

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

3.效果演示

记得在action.js中配置

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

 

好啦，今天的分享就到这了，希望能够帮到你呢！