SPA项目开发之动态树+数据表格+分页

最新推荐文章于 2024-03-04 10:00:22 发布
最新推荐文章于 2024-03-04 10:00:22 发布
阅读量173 收藏
点赞数
分类专栏： 上课知识 文章标签： SPA项目开发之动态树+数据表格+分页
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaoyi215/article/details/101699254
版权

SPA项目开发之动态树+数据表格+分页

课程目标

1、动态树功能
2.elementui中的数据表格
3、右侧文章的分页查询功能

动态树功能

Leftav.vue:

<template>
	<el-menu router :default-active="$route.path" default-active="2" 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 :key="'id_'+m.treeNodeId" :index="'id_'+m.treeNodeId" v-for="m in menus">
			<template slot="title">
				<!-- 加载图标 -->
				<i :class="m.icon"></i>
				<!-- 拿到一级菜单 -->
				<span>{{m.treeNodeName}}</span>
			</template>
			<el-menu-item :key="'id_'+m2.treeNodeId" :index="m2.url" v-for="m2 in m.children">
				<template slot="title">
					<i :class="m2.icon"></i>
					<span>{{m2.treeNodeName}}</span>
				</template>
				
			</el-menu-item>
			</el-submenu>
		</el-submenu>
		
	</el-menu>
</template>
<script>
	export default {
		data(){
			return{
				/* 定义变量 不折叠 */
				collapsed: false,
				/* 定义变量拿到数据 */
				menus:[]
			}
		},
		/* 左侧菜单折叠 */
		created(){
			/* v就是从vue总线Bus中获取的变量值 */
			this.$root.Bus.$on('collapsed-side-clik',(v)=>{
				this.collapsed = v ;
			});
			/* 到后端拿数据树形菜单加载 */
			let url =this.axios.urls.SYSTEM_MENU_TREE;
			this.axios.post(url, this.ruleForm).then((response) => {
								console.log(response);
								/* 拿到menus的值 */
								this.menus = response.data.result;
			
							}).catch(function(error) {
								console.log(error);
							});
		}
	}
</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>

在这里插入图片描述

2.elementui中的数据表格

先在LeftNav里面加一个路由：

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

然后再把LeftNav里面index里的数据改成m2.url：

			<el-menu-item :key="'id_'+m2.treeNodeId" :index="m2.url" v-for="m2 in m.children">

Articles.vue：

		<!--列表-->
		<el-table size="small" :data="listData" element-loading-text="拼命加载中" style="width: 100%;">
		
			<el-table-column align="center" type="selection" min-width="1">
			</el-table-column>
			<el-table-column sortable prop="id" label="文章ID" min-width="1">
			</el-table-column>
			<el-table-column sortable prop="title" label="文章标题" min-width="3">
			</el-table-column>
			<el-table-column sortable prop="body" label="文章内容" min-width="5">
			</el-table-column>
			<!-- <el-table-column align="center" label="操作" min-width="300">
				<template slot-scope="scope">
					<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
					<el-button size="mini" type="danger" @click="deleteUser(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column> -->
		</el-table>
		</el-table>
<el-pagination style="margin-top: 20px;" @size-change="handleSizeChange" @current-change="handleCurrentChange"
		 :current-page="formInline.page" :page-sizes="[10, 20, 30, 50]" :page-size="100" layout="total, sizes, prev, pager, next, jumper"
		 :total="total">
		</el-pagination>

	</div>
</template>

<script>
	/* 分页功能 */
	export default {
		data() {
			return {
				listData: [],
			};
		},
		created() {
		let url = this.axios.urls.SYSTEM_ARTICLE_LIST;
				this.axios.post(url, this.formInline).then((response) => {
					console.log(response);
				this.ListData = response.data.result;
				}).catch(function(error) {
					console.log(error);
				});
		}
	}
	
</script>

<style>

</style>

3、右侧文章的分页查询功能

index.js 定义路由：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import AppMain from '@/components/AppMain'
import Articles from '@/views/sys/Articles'
import Login from '@/views/Login'
import Reg from '@/views/Reg'

Vue.use(Router)

export default new Router({
	/* 定义路由线路 */
  routes: [
    {
      path: '/',
      name: 'Login',
      component: Login
    },
		{
			path: '/Login',
			name: 'Login',
			component: Login
		},
		{
			path: '/Reg',
			name: 'Reg',
			component: Reg
		},
		{
			path: '/AppMain',
			name: 'AppMain',
			component: AppMain,
			children:[
				{
					path: '/sys/Articles',
					name: 'Articles',
					component: Articles
				},
			]
		}
  ]
})

Article.vue:

<template>
	<div>
		<!-- 搜索功能 -->
			<el-form :inline="true" :model="formInline" class="user-search">
			<el-form-item label="搜索：">
				<el-input size="small" v-model="formInline.title" placeholder="输入文章标题"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
				<!-- <el-button size="small" type="primary" icon="el-icon-plus" @click="handleEdit()">添加</el-button> -->
			</el-form-item>
		</el-form>

		<!--列表-->
		<el-table size="small" :data="listData" element-loading-text="拼命加载中" style="width: 100%;">
			<el-table-column align="center" type="selection" min-width="1">
			</el-table-column>
			<el-table-column sortable prop="id" label="文章ID" min-width="1">
			</el-table-column>
			<el-table-column sortable prop="title" label="文章标题" min-width="3">
			</el-table-column>
			<el-table-column sortable prop="body" label="文章内容" min-width="5">
			</el-table-column>
			<!-- <el-table-column align="center" label="操作" min-width="300">
				<template slot-scope="scope">
					<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
					<el-button size="mini" type="danger" @click="deleteUser(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column> -->
		</el-table>
<el-pagination style="margin-top: 20px;" @size-change="handleSizeChange" @current-change="handleCurrentChange"
		 :current-page="formInline.page" :page-sizes="[10, 20, 30, 50]" :page-size="100" layout="total, sizes, prev, pager, next, jumper"
		 :total="total">
		</el-pagination>

	</div>
</template>

<script>
	/* 分页功能 */
	export default {
		data() {
			return {
				listData: [],
				formInline:{
					page:1,
					rows:10
				},
				total:0
			};
		},
		methods:{
handleSizeChange(rows) {
				//页大小发生改变触发的事件、
				console.log("当前页大小:"+rows);
				this.formInline.page = 1;
				this.formInline.rows = rows;
				//查询
				this.search();
			},
			handleCurrentChange(page) {
				//当前页页码发生改变触发的事件
				console.log("当前页码:"+page);
				this.formInline.page = page;
				this.search();
			},
			doSearch(params){
				let url = this.axios.urls.SYSTEM_ARTICLE_LIST;
				this.axios.post(url, this.formInline).then((response) => {
					console.log(response);
					this.listData = response.data.result;
					this.total = response.data.pageBean.total;
				}).catch(function(error) {
					console.log(error);
				});
			},
			search(){
				this.doSearch(this.formInline);
			}

		},
		created() {
			this.doSearch({});
		}
	}
	
</script>

<style>

</style>

结果：
在这里插入图片描述

依呀
关注
专栏目录
SPA项目开发之左侧树+表格+分页
only老K的博客 qq:1025271924
09-28 191
目录动态树功能关闭mock.js定义变量获取数据加载数据LeftNav.vue效果图存在问题：既左侧树一起开关数据表格 动态树功能 关闭mock.js 定义变量 return { collapsed: false, menus:[] } 获取数据 let url = this.axios.urls.SYSTEM_MENU_TREE; this.axios.post(...
jsp 分页 树型菜单
09-14
noka标签是一组在JSP上远行的支持多种数据库的集数据处理，显示处理于一体的JSP标签，其中有: 编码拦截器工具类 数据表格（DBTable）标签 时间日期（DateOrTime）标签 组合选择框(selectDouble)标签 下拉选择框(select)标签 树形菜单(TreeDB)标签<不带Checkbox框> 树形菜单(TreeMenuCheckbox)标签 选项卡(tabs/ Divs)标签 数据查询录入（dataselectinput）标签到 QQ菜单标签 下拉选择框树形菜单 年份选择标签(YearSelect) 日期时间格式化标签(FormatData) 字符串格式标签(StringLenFormat) 文件服务标签(fileserverpath)
jquery插件--表格树--GridTree(后台分页版本20091018)(过期)
10-20
1.添加了表格树的后台分页代码 2.提供了两种表格树的样式选择 3.添加了全选按钮
Extjs2分页树 带查询功能
我的博客
03-29 277
先上效果图：     插件代码见附件   使用例子： 给treepanel加上一下代码：     plugins: new Ext.ux.tree.TreeNodeMouseoverPlugin(),//tree分页插件          loader:new Ext.ux.tree.PagingTreeLoader({           dataUrl:"你自己的url...
extjs增删改查分页树
04-28
extjs增删改查分页树
Vue_09_Spa_项目3次-开发动态树+数据表格+分页
qq_58530605的博客
11-12 1070
一、动态树功能 1.把树形菜单变成动态数据，拿到数据库中的数据 先在main.js里面关闭昨天的mock // process.env.MOCK && require('@/mock') 再在LeftNav.vue里面写入： <script> export default { data(){ return{ collapsed:false } }, created(){/* 钩子函数 :只要组件被访问了，
资源前后端分离式分布式微服务架构项目CMS前端开发讲义+源码+视频
03-03
本文详细介绍了资源前后端分离式分布式微服务架构项目中的关键技术点，包括 Vue.js 的使用技巧、Webpack 的搭建与使用、CMS 前端工程的创建以及分页查询的前端开发等内容。这些知识点对于理解和掌握现代 Web 开发...
vue+layui实现select动态加载后台数据的例子
10-16
动态加载数据是Web开发中的常见需求，尤其是在单页应用中，经常需要与后端API进行交互，获取数据后动态更新页面内容。在Vue.js中，通常使用`axios`这个HTTP库来发送请求并处理响应数据。 ### 问题解决：时间差问题 ...
java动态树形菜单与分页
01-16
java的动态树形菜单，和分页的实现，源码加数据库，可直接运行。
树形+分页+表格
qq_59076775的博客
01-19 676
传入上一层的pid。
SPA项目开发之动态树&数据表格及分页
钰团的博客
08-13 150
SPA项目开发之动态树&数据表格及分页动态树index.jsLeftNav.vue数据表格展示及分页效果Articles.vue 动态树 index.js router目录下 import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' impor...
封装zTree实现大数据树
HaleyTiger的博客
10-22 1146
对zTree树进行了二次封装： 【功能说明】： 1.支持异步获取下一层级节点数据。 2.支持指定数量节点分页功能。 3.支持增删改节点。 4.支持模糊搜索已加载（缓存）节点数据。 【缺点（暂未做）】： 1.搜索定位缺点，浏览器展开节点过多时，搜索效率低下（浏览器假死）。 2.不支持提供数据库全量模糊搜索。 3.设定为分页树时，建议不要配置节点操作（增删改）功能。 4.当数据量过大时，限制于浏览器，...
【java】树形结构分页（真分页）
阿杰
04-26 6759
对于一个查询来说，如果数据量是不断增加的，并且对于最高权限要显示全表数据，就必须考虑真了，那么树形结构如何真分页分页呢？网上找了好多，并没有一个具体的方案，只能自己想一个了 真分页: 即每次只从数据库取到相应的数据,然后返回,这样可以性能要比假分页高一些 假分页: 即查询数据库中符合条件的所有数据,然后在模型层,自己对list结果进行处理为相应的分页效果，或者由web进行分页展示 关联文章树形结构 需求 按照最顶级节点数分页，不是所有数据条数 返回一个树形结构 根据权限进行数据结构筛选 优化方案
优雅的对树形结构进行高性能分页，闭包表才是yyds
最新发布
方志朋的博客
03-04 604
一、定义的概述闭包表（Closure Table）是一种用于存储和查询树形数据结构的技术，它通过在关系表中记录树节点之间的直接和间接关系来表示节点之间的层次结构。闭包表的设计目的是支持高效的树遍历和查询操作。二、闭包表的特点闭包表通常是一个包含两个主要列的表：祖先列和后代列。每一行记录都表示一对节点之间的关系，其中祖先列存储父节点（或祖先节点）的标识，后代列存储子节点（或后代节点）的标识。通过在闭...
MyBatis-plus实现树形结构展示并分页
weixin_44021888的博客
07-14 3281
MyBatis-plus实现树形结构展示 一、无分页树形结构展示 实体类 import com.baomidou.mybatisplus.annotation.TableField; import com.baomidou.mybatisplus.annotation.TableId; import com.baomidou.mybatisplus.annotation.TableName; import lombok.Data; import java.io.Serializable; import
spa项目之动态树+数据表格+分页
weixin_45111741的博客
09-29 293
文章目录1.动态树的渲染1.1 先把main.js中导入的mock注释 1.动态树的渲染 上一篇博客已经完成了绑定一个左侧的菜单，但数据是mock.js的数据，这一节课我们需要调用到后台的数据，来完成左侧菜单 1.1 先把main.js中导入的mock注释 这节课不需要用到mock.js 1.2 利用钩子函数 ，实现动态树的渲染 ① 通过URL连接到后台，获取到后台 树的数据 let url=t...
TP5 分页 如果查询传递过的page分页数和limit行数
叶落无痕的博客
04-29 1084
官方文档：https://www.kancloud.cn/manual/thinkphp5/118080 page方法也是模型的连贯操作方法之一，是完全为分页查询而诞生的一个人性化操作方法。 我们在前面已经了解了关于limit方法用于分页查询的情况，而page方法则是更人性化的进行分页查询的方法，例如还是以文章列表分页为例来说，如果使用limit方法，我们要查询第一页和第二页（假设我们每页输出10条数据）写法如下： // 查询第一页数据 Db::table('thi...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值