vue--vue+ElementUI实现动态树+数据表格+分页

前提在上一篇博客之后，继续来写

实现动态树

数据表结构：

        实现无限极分类 父类的pid是子类的id

后端代码：

/**
	 * 根据父类id查询子类pid的数据（递归）
	 * @param pid
	 * @param mod
	 */
	public void queryModuleByPid(Integer pid,Module mod){
		String sql="select id,pid,text,icon,url,sort from t_module_vue where"
				+ " pid="+pid;
		List<Module> lst=super.executeQuery(sql, null, new CallBack<Module>() {
			@Override
			public List<Module> forEach(ResultSet rs) throws SQLException {
				List<Module> lst=new ArrayList<Module>();
				Module node=null;
				while(rs.next()) {
					node=new Module();
					int id=rs.getInt("id");
					node.setId(id);
					node.setPid(rs.getInt("pid"));
					node.setText(rs.getString("text"));
					node.setIcon(rs.getString("icon"));
					node.setUrl(rs.getString("url"));
					lst.add(node);
                    //此注释代表实现无限极分类,在此只实现了两级
					//queryModuleByPid(id, root);
				}
				return lst;
			}
		});
		mod.setChildren(lst);
	}
	
	/**
	 * 获取Tree根节点
	 * @return
	 */
	public List<Module> queryRootNode(){
		String sql="select id,pid,text,icon,url,sort from t_module_vue where"
				+ " pid=-1";
		return super.executeQuery(sql, null, new CallBack<Module>() {
			@Override
			public List<Module> forEach(ResultSet rs) throws SQLException {
				List<Module> lst=new ArrayList<Module>();
				Module root=null;
				while(rs.next()) {
					root=new Module();
					int id=rs.getInt("id");
					root.setId(id);
					root.setPid(rs.getInt("pid"));
					root.setText(rs.getString("text"));
					root.setIcon(rs.getString("icon"));
					root.setUrl(rs.getString("url"));
					lst.add(root);
					queryModuleByPid(id, root);
				}
				return lst;
			}
		});
	}

前端代码：

定义后端接口路径

        'INIT_MENU': '/moduleAction.action', //初始化左侧菜单

左侧菜单栏

<template>
<el-menu router :default-active="$route.path" 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中的属性 含义
        index:用于菜单折叠,唯一
        key:唯一

        第二级节点el-submenu中的属性含义
        index:用于页面跳转,唯一
        key:唯一
-->

<el-submenu v-for="root in intMue" :index="'id-'+root.id" :key="'key-'+root.id">
        <template slot="title">
          <i :class="root.icon"></i>
          <span>{{root.text}}</span>
        </template>
        <!-- :index 的url 会以栈的形式存储 this.$router.push-->
       <el-menu-item v-for="node in root.children" :index="node.url" :key="'key-'+node.id">
         <i :class="node.icon"></i>
         <span slot="title">{{node.text}}</span>
       </el-menu-item>
      </el-submenu>

</template>

<script>
  export default {
      name:'LeftAside',
      props:['collapsed'],
      data:function(){
        return{
            intMue:[]
        }
      },
      methods:{

      },
      created:function(){
        let url=this.axios.urls.INIT_MENU;

       this.axios.get(url,{params:{methodName:'queryTreeNode'}}).then(resp=>{
        let data=resp.data.data;
        // console.log(data);
        this.intMue=data;
       }).catch(error=>{
         console.log(error);
       })

      }
  }
</script>

数据表格

书本管理

定义后端接口路径:

'QUERY_BOOK': '/bookAction.action', //书本管理接口

创建书本路由

<template>
<div style="margin: 15px;">
<!-- 面包屑 路径导航 -->
    <el-breadcrumb style="font-size: 16px;" separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>书本列表</el-breadcrumb-item>
    </el-breadcrumb>


    <!-- 搜索栏 -->
    <el-form :inline="true" style="margin-top: 15px;margin-bottom: -15px;">
      <el-form-item>
        <el-input v-model="bookname" placeholder="书本名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="query(1)">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 数据表格 -->
    <el-table :data="tableData" 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>
</div>
</template>

<script>
  export default {
    name: 'BookList',
    data: function() {
      return {
        bookname: '',
        tableData:[],
      }
    },
    methods: {
      query: function() {
         
          let url =this.axios.urls.QUERY_BOOK;
          //定义请求参数
          let params={
            url,
            methodName:'queryBookPager',
            bookname:this.bookname,
          }
          //发起请求
          this.axios.post(url,params).then(resp=>{
              let data=resp.data.data;
              
            
              this.tableData=data.rows;
          }).catch(error=>{
              console.log(error);
          });
      }
    }

  }
</script>

引入到路由器中

//书本管理
import BookList from '@/views/book/BookList'

{
   path: '/Main',
   name: 'Main',
   component: Main,
   children:[
    {
      path: '/book/BookList',
      name: 'BookList',
      component: BookList
    }
   ]
}

分页

在书本路由中引入分页栏 再添加分页属性传到后端

 <!-- 分页栏 -->
    <el-pagination background style="margin-top: 15px;"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[10, 20, 30,40]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

<script>
  export default {
    name: 'BookList',
    data: function() {
      return {
        bookname: '',
        tableData:[],
        page:1,
        rows:8,
        total:0
      }
    },
    methods: {
      //每页显示条数的改变事件 r==rows
      handleSizeChange:function(r){
        console.log('当前页面改变事件='+r);
        this.rows=r;
        // this.page=1;
         this.query(1);
      },
      //当前页面的改变事件
      handleCurrentChange:function(p){
        // this.page=p;
         this.query(p);
        console.log('当前页面的改变事件='+p);
      },
      query: function(p) {
          this.page=p;
          let url =this.axios.urls.QUERY_BOOK;
          //定义请求参数
          let params={
            url,
            methodName:'queryBookPager',
            bookname:this.bookname,
            page:p,
            rows:this.rows
          }
          //发起请求
          this.axios.post(url,params).then(resp=>{
              let data=resp.data.data;
              // console.log(data);
              this.total=data.total;
              this.tableData=data.rows;
          }).catch(error=>{
              console.log(error);
          });
      }
    }

  }
</script>

至此vue+ElementUI实现动态树+数据表格+分页介绍完毕,由于作者水平有限难免有疏漏，欢迎留言纠错。