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 lst=super.executeQuery(sql, null, new CallBack() {
			@Override
			public List forEach(ResultSet rs) throws SQLException {
				List lst=new ArrayList();
				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 queryRootNode(){
		String sql="select id,pid,text,icon,url,sort from t_module_vue where"
				+ " pid=-1";
		return super.executeQuery(sql, null, new CallBack() {
			@Override
			public List forEach(ResultSet rs) throws SQLException {
				List lst=new ArrayList();
				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', //初始化左侧菜单

左侧菜单栏

数据表格

书本管理

定义后端接口路径:

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

创建书本路由

引入到路由器中

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

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

分页

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

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