动态树+数据表格+分页

最新推荐文章于 2024-06-03 17:36:15 发布
最新推荐文章于 2024-06-03 17:36:15 发布
阅读量246 收藏
点赞数
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46964039/article/details/108275943
版权

动态树+数据表格+分页

前言

因为我现在做的是vue的一个小项目，就是界面的小功能，先看一下前面做的类容

https://blog.csdn.net/qq_46964039/article/details/108241801

需要的数据表

可以使用我提供的数据库表，也可以使用自己的数据表
在这里插入图片描述


DROP TABLE IF EXISTS `t_book_vue`;

CREATE TABLE `t_book_vue` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `bookname` varchar(50) NOT NULL,
  `price` float NOT NULL,
  `booktype` varchar(40) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=34 DEFAULT CHARSET=utf8 COMMENT='书本信息表';



/*Data for the table `t_book_vue` */

insert  into `t_book_vue`(`id`,`bookname`,`price`,`booktype`) values (1,'西游记',100.02,'名著'),(2,'红楼梦',110.08,'名著'),(3,'三国演义',121.12,'名著'),(4,'遮天',130.9,'玄幻'),(5,'凡人修仙传',200,'修仙'),(6,'倚天屠龙记',150.16,'武侠'),(7,'斗破苍穹',115.07,'玄幻'),(8,'超级兵王',145,'言情'),(9,'武极天下',45.55,'玄幻'),(10,'聊斋志异',100.12,'玄幻'),(11,'永生',110.11,'玄幻'),(12,'武动乾坤',90.89,'玄幻'),(13,'完美世界',100,'玄幻'),(14,'万域之王',56.5,'玄幻'),(15,'西游记',100.02,'名著'),(16,'红楼梦',110.08,'名著'),(17,'三国演义',121.12,'名著'),(18,'遮天',130.9,'玄幻'),(19,'凡人修仙传',200,'修仙'),(20,'倚天屠龙记',150.16,'武侠'),(21,'斗破苍穹',115.07,'玄幻'),(22,'超级兵王',145,'言情'),(23,'武极天下',45.55,'玄幻'),(24,'聊斋志异',100.12,'玄幻'),(25,'永生',110.11,'玄幻'),(26,'武动乾坤',90.89,'玄幻'),(27,'完美世界',100,'玄幻'),(28,'万域之王',56.5,'玄幻'),(32,'Java',1000,'修仙'),(33,'娃哈哈',100,'玄幻');

/*Table structure for table `t_module_vue` */



DROP TABLE IF EXISTS `t_module_vue`;

CREATE TABLE `t_module_vue` (
  `id` int(11) NOT NULL COMMENT '唯一标识',
  `pid` int(11) NOT NULL COMMENT '父ID',
  `text` varchar(50) NOT NULL,
  `icon` varchar(30) DEFAULT NULL,
  `url` varchar(50) DEFAULT NULL,
  `sort` int(11) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

/*Data for the table `t_module_vue` */

insert  into `t_module_vue`(`id`,`pid`,`text`,`icon`,`url`,`sort`) values (10,-1,'书本管理','el-icon-notebook-2','',1),(11,-1,'订单管理','el-icon-s-order','',2),(12,-1,'系统管理','el-icon-setting','',3),(1001,10,'新增书本',NULL,'/book/AddBook',4),(1002,10,'书本管理',NULL,'/book/BookList',5),(1101,11,'订单管理','','/OrderList',6),(1102,11,'订单统计',NULL,'/OrderStatistics',7),(1201,12,'用户管理',NULL,'/UserManager',8),(1202,12,'权限管理',NULL,'/AuthManager',10),(1203,12,'字典管理',NULL,'/DictList',11);

/*Table structure for table `t_user_vue` */



DROP TABLE IF EXISTS `t_user_vue`;

CREATE TABLE `t_user_vue` (
  `id` varchar(36) NOT NULL COMMENT '唯一标识',
  `username` varchar(40) NOT NULL COMMENT '登录账号',
  `password` varchar(40) NOT NULL COMMENT '登录密码',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

/*Data for the table `t_user_vue` */

通过连接后台和数据，把死的数据变成活的

实现的效果

在这里插入图片描述
菜单栏是属于leftAside.vue中的，代码块

<template>
	<!-- 页面加载的时候动态树就要显示出来 -->
	<el-menu router :default-active="$router.path" class="el-menu-vertical-demo"  background-color="#334157"
	 text-color="#fff" active-text-color="#ffd04b" :collapse="leftCollapsed">
		<div class="logobox">
			<img class="logoimg"  src="../assets/img/logo.png"/>
		</div>
		<el-menu-item index="/Main">
				<i class="el-icon-s-home"></i>
				<span slot="title">首页</span>
		</el-menu-item>
			
		<!--使用v-for指令进行遍历 -->
		<el-submenu v-for="node in treeNodes"
		:key="'key-'+node.id"
		:index="'index-'+node.id">
		  <template slot="title">
		  	<i :class="node.icon"></i>
		  	<span>{{node.text}}</span>
		  </template>
		  <!--使用v-for指令进行遍历 -->
		  <el-menu-item v-for="node in node.children"
		  :key="'key-'+node.id"
		  :index="node.url">
		  	<i :class="node.icon"></i>
		  	<span slot="title">{{node.text}}</span>
		  </el-menu-item>
		</el-submenu>
	</el-menu>
</template>
<script>
	export default {
		name:'LeftAside',
		props:['leftCollapsed'],
		data:function(){
			return{
				treeNodes:[]
			}
		},
		created:function(){
			/* 使用let进行声明 避免数据污染 */
			let  params={
				'methodName':'queryTreeNode'
			};
			let  url=this.axios.urls.SYSTEM_MODULE_TREENODE;
			this.axios.get(url,{
				params:params,
			}).then(resp=>{
				this.treeNodes=resp.data.data;
				console.log(this.treeNodes);
			}).catch(resp=>{
				
			});
			//配置首页默认打开
			this.$router.push('/Main');
		}
	}
</script>
<style>
	.el-menu-vertical-demo:not(.el-menu--collapse) {
		width: 240px;
		min-height: 400px;
	}

	.el-menu-vertical-demo:not(.el-menu--collapse) {
		border: none;
		text-align: left;
	}

	.el-menu-item-group__title {
		padding: 0px;
	}

	.el-menu-bg {
		background-color: #1f2d3d !important;
	}

	.el-menu {
		border: none;
	}

	.logobox {
		height: 40px;
		line-height: 40px;
		color: #9d9d9d;
		font-size: 20px;
		text-align: center;
		padding: 20px 0px;
	}

	.logoimg {
		height: 40px;
	}
</style>

登录之后跳转到主界面，默认打开的是首页

在这里插入图片描述
子菜单点击跳转事件

在这里插入图片描述
其他的子菜单的跳转

在这里插入图片描述

写booklist界面的样式

注：样式可以去element的官网找，然后进行修改，改成自己想要的样子

在这里插入图片描述

在这里插入图片描述
代码块

<template>
	<div>
		<el-breadcrumb separator="/" style="padding-top: 20px;">
			<el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>书本管理</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 搜索框 -->
			<el-form :inline="true" class="demo-form-inline" style="margin-top: 20px;">
				<el-form-item label="书本名称">
					<el-input v-model="bookname"></el-input>
				</el-form-item>			
				<el-form-item>
					<el-button type="primary" @click="query(1)">查询</el-button>
				</el-form-item>
			</el-form>
			
			<!-- 表格 -->
			<el-table :data="result" style="width: 100%;" :border="true" max-height="550">
				<el-table-column prop="id" label="书本编号"  min-width="30" align="center"></el-table-column>
				<el-table-column prop="bookname" label="书本名称" min-width="60" align="center"></el-table-column>
				<el-table-column prop="price" label="书本价格" min-width="30" align="center"></el-table-column>
				<el-table-column prop="booktype" label="书本类型" min-width="60" align="center"></el-table-column>
			</el-table>
				<!-- 分页 -->
				<el-pagination background
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="page"
					:page-sizes="[10, 20, 30, 40]"
					:page-size="rows"
					layout="total, sizes, prev, pager, next, jumper"
					:total="total">
				</el-pagination>
	</div>	
</template>

<script>
	export default {
		data:function() {
			return {
				bookname:null,
				result:[],
				total:0,
				page:1,
				rows:10
			}
		},
		methods:{
			query:function(){
				if(null!=page){
					this.page=page;
				}
				let url=this.axios.urls.BOOK_QUERY_PAGER;
				let params={
					bookname:this.bookname,
					methodName:'queryBookPager',
					page:this.page,
					rows:this.rows
				}
				this.axios.post(url,params).then(resp=>{
					let data=resp.data;
					//获取查询结果
					this.result=data.data.rows;
					//获取总记录数
					this.result=data.data.total;
				}).catch(resp=>{
					
				});
			},
			//改变每页显示条数所触发的事件
			handleSizeChange:function(rows){
				this.rows=rows;
				this.page=1;
				this.query(null);
			},
			//点击分页按钮所触发的事件
			handleCurrentChange:function(page){
				console.log(page);
				this.page=page;
				this.query(null);
			}
		}
	}
</script>

<style>

</style>

效果图
在这里插入图片描述
总结：如有什么不懂的，欢迎评论区逛街！！！！！！
在这里插入图片描述

青猫锅锅
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue（树表格分页）
m0_64863860的博客
10-12 539
t_module_vue表中已经配置了功能url，为方便，将书本管理组件定义为BookList。如果使用其他名字则需要修改功能url配置，保持一致。页面上使用的面包屑，查询条件，表格，分页等空间，可以查看element-ui官网。该步骤主要关注页面布局，并没有绑定数据，编写完成后，观察页面效果。在Main组件中指定的是用于显示各功能组件的。先不考虑分页，从后台接口获取数据并绑定到表格显示。菜单图标可以到官网去查找。图二： script部分。script部分，图一。
jquery插件--表格树--GridTree(后台分页版本20091018)(过期)
10-20
1.添加了表格树的后台分页代码 2.提供了两种表格树的样式选择 3.添加了全选按钮
文本抽取：复合材料曲线图及表格数据与文本关系抽取系统
最新发布
06-03 435
复合材料行业迫切需要一种能够高效整合和处理信息的解决方案，以降低信息获取成本，提高信息处理的效率和准确性。具体来说，企业需要一个能够自动化收集、整合和分析来自不同来源的信息的平台，以减少对人工操作的依赖。此外，企业还希望提高信息识别的准确性，尤其是对非结构化文本信息的识别，以确保信息的质量和可用性。企业还期望通过这一平台，能够快速响应市场变化，提高研发、生产和销售等各个环节的效率，从而在激烈的市场竞争中获得优势。
EXT树表分页(SERVLET)
09-26
EXT 3.0 + SERVLET 开发的EXT树表分页功能. 包里包括了工程相关的所有东西(包括引用的EXT) 下载后部署就可用.
JdGrid树形表格分页
那一刻，那一夜，那一月，那一年，那一世
04-09 4985
JdGrid实现树形表格分页查询
Vue+ElementUI table实现表格分页
12-13
Vue+ElementUI table表格分页，供大家参考，具体内容如下 分页的两种方式。前端分页，后端分页。两种方式各有个的优缺点吧。 前端分页：后台只需将数据返回，不需要做过多处理，前端一次请求拿到所有数据后做分页...
MyQTDemo(渐变+树状导航+滑动导航+分页表格+切换开关)
04-16
分页表格是处理大量数据时常用的一种方式，它可以将数据分为多个页面进行显示，避免一次性加载过多数据导致的性能问题。在Qt中，QTableView或QTableWidget可用于构建表格，配合QSortFilterProxyModel和...
Layui的树形表格treeTable
06-20
在Layui中，树形表格（treeTable）是一种非常实用的功能，它将传统的表格与树状结构相结合，适用于展示具有层级关系的数据，如部门结构、文件目录等。下面我们将深入探讨Layui的treeTable，以及如何实现无限层级的树...
利用vue + element实现表格分页和前端搜索的方法
01-19
本文主要介绍了关于vue + element实现表格分页和前端搜索的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧。 实现思路 1.前端后台管理会存在很多表格,表格数据过多就需要分页; 2.前端...
Layui树形表格.rar
06-11
它继承了Layui数据表格的大部分功能，如分页、排序、筛选等，同时增加了树状结构特有的特性，如节点展开与折叠、懒加载、复选框联动等。 1. **懒加载**：在大数据量的情况下，为了提高用户体验和性能，Layui树形...
JAVA_树状表格分页(layUI、treeTable.js)
Junsy
09-26 5772
效果图展示(PS:本人很懒，刚开始想在网上随意找一个就用，后来发现好像PHP的不少，JAVA的树状表格大多数跟我开始写的一样没有分页，导致数据量过大后加载过于缓慢被客户吐糟，最后没找到合适的就自己写了一个简单的demo，不嫌弃的话可以自己再改改样式) 准备：layUI、treeTable.js 代码展示： <input id="total" type="hidden" value...
TreeGrid分页树形表格
weixin_30311605的博客
08-16 1974
先展示效果图： 加载treegrid的json数据格式有两种： （1）基本的数据结构 [{ "id":1, "name":"C", "size":"", "date":"02/19/2010", "children":[{ "id":2, "name":"Program Files",...
数据表格
化学纤维
05-17 180
数据表格 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 开发工具与关键技术：Visual Studio 2015、table数据表格 作者：梁柏源 撰写时间：2019/5/15 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~...
数据表格(table)
weixin_44543108的博客
04-18 1159
数据表格(table) 下载到了Layui，将它完整的放入你要的项目里，然后需要你引入css文件和js文件两个文件，需要用到Layui模块的时候，你就加载你需要的模块就行了 Css文件 <link rel="stylesheet" href="/layui/css/layui.css" media="all"> Js文件 <script src="/layui/layui.js...
ExtJS表格与树控件详解：GridPanel与TreePanel
在EXTJS框架中，表格和树控件是两种常用的组件，用于展示和操作数据。本教程主要涵盖了EXTJS中的GridPanel（基本表格）和TreePanel（树控件）的使用方法，以及与其相关的数据存储和读取机制。 1. **表格控件** ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值