ElementUI之动态树+数据表格+分页

ElementUI之动态树+数据表格+分页

一.ElementUI之动态树(动态菜单实现)

菜单代码结构

在action.js里设置系统菜单数据和书籍数据地址

'SYSTEM_MENU': '/module//queryRootNodebook', //系统菜单
  'BOOK_LIST': '/book/queryBookPager', //书籍查询

在created()生命周期中获取表格的数据

export default {
		data(){
		  return{
        collapsed:false,
        menus:[]
		  }
		},
    created(){
      this.$root.BUS.$on('doCollapsed',v=>{
        //v指的是TopNav传递过来的this.collapsed
        this.collapsed=v;
      });
      let url=this.axios.urls.SYSTEM_MENU;
      this.axios.get(url,{}).then(resp=>{
        console.log(resp)
        this.menus=resp.data.rows;

      }).catch(err=>{

      });
    }
	}

获取的数据结构:

一级菜单的加载:

	//保证菜单唯一性
        
		
	

二级菜单的加载:

	
        
		
            
            {{m2.text}}
        
	

对应菜单的跳转

在主界面上加上下行代码.将子菜单的index属性的值设置为url跳转地址,即可实现子菜单点击跳转

 router :default-active="$route.path"

创建菜单对应地址的Vue文件,在AppMain.Vue(主界面)设置锚点

在index.js中设置跳转地址参数

import AddBook from '@/views/book/AddBook'
import BookList from '@/views/book/BookList'

{
      path: '/AppMain',
      name: 'AppMain',
      component: AppMain,
      children:[
        {
          path: '/LeftNav',
          name: 'LeftNav',
          component: LeftNav
        },
        {
          path: '/TopNav',
          name: 'TopNav',
          component: TopNav
        },
        {
          path: '/book/AddBook',
          name: 'AddBook',
          component: AddBook
        },
        {
          path: '/book/BookList',
          name: 'BookList',
          component: BookList
        }
      ]
    }

即可实现跳转

运行效果:

二.数据表格

查询书籍按钮

  

     
       
     

     
       查询
     

数据表格

分页

后台数据格式

前端数据接收以及方法

export default{
  data(){
    return{
      bookname:null,//单选框内的内容,暂时没用
      tableData:[],//表格数据
      page:1,//页数
      total:0,//数据条数
      rows:10//单页显示数据数
    }
  },
  methods:{
    query(params){//通用查询方法
      let url=this.axios.urls.BOOK_LIST;//查询书籍数据

      this.axios.get(url,{params:params}).then(resp=>{
        this.tableData=resp.data.rows;//将查询到的数据传入表格
        this.total=resp.data.total;//将查询到的数据传入表格
      }).catch(err=>{

      })
    },
    onSubmit(){

      let params={
        bookname:this.bookname
      }
      this.query(params)
    },
    handleSizeChange(r){//Ui提供的当单页显示数据条数发生改变时执行的方法
      console.log("当前展示数"+r);//r即单页显示数据条数上限
      let params={
        bookname:this.bookname,
         page:this.page,
        rows:r
      }
      this.query(params)
    },
    handleCurrentChange(p){//Ui提供的当页数发生改变时执行的方法
      console.log("当前为第"+p+"页");
      let params={
        bookname:this.bookname,
        page:r,
        rows:this.rows
      }
      this.query(params)
    }
  }
}

最终结果