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

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

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

菜单代码结构

<el-menu>
	<el-submenu index="" key="">
        <template slot="title">
            <i class=""></i>
            <span></span>
        </template>
		<el-menu-item index="" key="">
            <i class=""></i>
            <span></span>
        </el-menu-item>
	</el-submenu>
</el-menu>

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

      });
    }
	}

获取的数据结构:

一级菜单的加载:

	<el-submenu v-for="m in menus"
  :index="'index_'+m.id"//保证菜单唯一性
   :key="'key_'+m.id">//保证菜单唯一性
        <template slot="title">
            <i :class="m.icon"></i>
            <span>{{m.text}}</span>
        </template>
		<!-- <el-menu-item index="" key="">
            <i class=""></i>
            <span></span>
        </el-menu-item> -->
	</el-submenu>

二级菜单的加载:

	<el-submenu v-for="m in menus"
  :index="'index_'+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="'index_'+m2.id"
   :key="'key_'+m2.id">
            <i :class="m2.icon"></i>
            <span>{{m2.text}}</span>
        </el-menu-item>
	</el-submenu>

对应菜单的跳转

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

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

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

 <router-view></router-view>

在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
        }
      ]
    }

即可实现跳转

运行效果:

二.数据表格

查询书籍按钮

  <el-form :inline="true"  class="demo-form-inline">
<el-form :inline="true"  class="demo-form-inline">
     <el-form-item v-model="bookname" label="书籍查询">
       <el-input  placeholder=""></el-input>
     </el-form-item>

     <el-form-item>
       <el-button type="primary" @click="onSubmit">查询</el-button>
     </el-form-

数据表格

<!-- 数据表格 -->
     <el-table :data="tableData"  borderstyle="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>

分页

 <el-pagination
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"

           :page-sizes="[10, 20, 30, 40]"
           :page-size="rows"
           layout="total, sizes, prev, pager, next, jumper"
           :total="total">
         </el-pagination>

后台数据格式

前端数据接收以及方法

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)
    }
  }
}

最终结果