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

周大福ye

已于 2022-05-14 14:25:33 修改

阅读量387

点赞数

分类专栏： vue 文章标签： vue.js elementui javascript

于 2022-05-14 14:24:17 首次发布

本文链接：https://blog.csdn.net/weixin_64987028/article/details/124767674

版权

这篇博客介绍了如何使用Vue.js和ElementUI组件库来实现动态树形菜单，结合数据表格和分页功能。首先，讲解了数据表结构，采用父类pid为子类id的方式实现无限级分类。接着，展示了前端代码，包括初始化左侧菜单的接口定义和菜单栏的实现。然后，提到了数据表格的创建，定义了书本管理接口，并在路由中引入。最后，讨论了分页功能，展示如何在书本路由中引入分页栏并设置分页属性传递给后端。

摘要由CSDN通过智能技术生成

实现动态树

数据表结构：

实现无限极分类 父类的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