动态树+数据表格+分页

最新推荐文章于 2023-09-26 23:19:39 发布
最新推荐文章于 2023-09-26 23:19:39 发布
阅读量284 收藏
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/XiaoZJun/article/details/108266524
版权
本文介绍了如何使用Vue技术栈，结合后台数据，实现动态展示的树形数据表格，并配合分页功能。涉及到的主要前端组件包括TopNav、Mave、LeftAside和BookList，以及对数据进行模糊查询的实现。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

动态树+数据表格+分页

后台数据

t_user_vue
t_module_vue
t_book_vue
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

创建这三张数据库表

前端代码

在这里插入图片描述
TopNav.vue类

<template>
  <el-menu class="el-menu-demo" mode="horizontal" background-color="#334157" text-color="#fff" active-text-color="#fff">
    <el-button class="buttonimg">
      <img class="showimg" :src="collapsed?imgshow:imgsq" @click="doToggle()">
    </el-button>
    <el-submenu index="2" class="submenu">
      <template slot="title">超级管理员</template>
      <el-menu-item index="2-1">设置</el-menu-item>
      <el-menu-item index="2-2">个人中心</el-menu-item>
      <el-menu-item @click="exit()" index="2-3">退出</el-menu-item>
    </el-submenu>
  </el-menu>
</template>

<script>
  export default {
    name: 'TopNav',
    data: function() {
      return {
        collapsed: false,
        imgshow: require('../assets/img/show.png'),
        imgsq: require('../assets/img/sq.png')
      }
    },
    methods: {
      doToggle: function() {
        this.collapsed=!this.collapsed;
        //console.log(this.collapsed);
        this.$emit('topnav-collapsed',this.collapsed);
      },
      exit: function() {
        this.$confirm('确认要退出系统吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '注销成功!'
          });
          this.$router.push('/');
        }).catch();
      }
    }
  }
</script>

<style scoped>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    border: none;
  }

  .submenu {
    float: right;
  }

  .buttonimg {
    height: 60px;
    background-color: transparent;
    border: none;
  }

  .showimg {
    width: 26px;
    height: 26px;
    position: absolute;
    top: 17px;
    left: 17px;
  }

  .showimg:active {
    border: none;
  }
</style>

在这里插入图片描述
Mave.vue类

<template>
	<el-container class="main-container">
		<el-aside :class="isCollapsed">
			<LeftAside :left-collapsed="collapsed"></LeftAside>
		</el-aside>
		<el-container>
			<el-header class="main-header">
				<TopNav @topnav-collapsed="mainCollapse"></TopNav>
			</el-header>
			<el-main class="main-center">
        <router-view/>
      </el-main>
		</el-container>
	</el-container>
</template>

<script>




	// 导入组件
	import TopNav from '@/components/TopNav.vue'
	import LeftAside from '@/components/LeftAside.vue'

	// 导出模块
	export default {
    name:'Main',
    data:function(){
      return{
        collapsed: false
        //asideClass:'main-aside-collapsed'
      }
    },
    methods:{
      mainCollapse:function(c){
        this.collapsed=c;
        console.log("Main组件=%s",this.collapsed);
      }
    },
    components:{
      TopNav,
      LeftAside
    },
    computed:{
      isCollapsed:function(){
        return this.collapsed?'main-aside-collapsed':'main-aside'
      }
    }
	};
</script>
<style scoped>
	.main-container {
		height: 100%;
		width: 100%;
		box-sizing: border-box;
	}

	.main-aside-collapsed {
		/* 在CSS中，通过对某一样式声明! important ，可以更改默认的CSS样式优先级规则，使该条样式属性声明具有最高优先级 */
		width: 64px !important;
		height: 100%;
		background-color: #334157;
		margin: 0px;
	}

	.main-aside {
		width: 240px !important;
		height: 100%;
		background-color: #334157;
		margin: 0px;
	}

	.main-header,
	.main-center {
		padding: 0px;
		border-left: 2px solid #333;
	}
</style>

LeftAside.vue类

<template>
	<el-menu router :default-active="$route.path" class="el-menu-vertical-demo"  background-color="#334157"
	 text-color="#fff" active-text-color="#ffd04b" :collapse="leftCollapsed">
		<!-- <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-menu-item index="/Home">
    	<i class="el-icon-s-home"></i>
    	<span slot="title">首页</span>
    </el-menu-item>
    <el-submenu v-for="root in treeNodelst"
    :key="'key-'+root.id"
    :index="'index-'+root.id">
      <template slot="title">
      	<i :class="root.icon"></i>
      	<span>{{root.text}}</span>
      </template>
      <el-menu-item v-for="node in root.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{
        treeNodelst:[]
      }
    },
    created:function(){
      let url=this.axios.urls.SYSTEM_MODULE_TREENODE;
      let params={
        methodName:'queryTreeNode'
      };
      this.axios.get(url,{params:params}).then(resp=>{
        this.treeNodelst= resp.data.data;
        console.log(this.treeNodelst);
      }).catch(resp=>{

      });
      //配置首页默认打开
      this.$router.push('/Home');
    }
	}
</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.vue类

<template>
  <div>
    <el-breadcrumb separator="/" style="padding-top:15px ;">
      <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: 15px;">
      <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="30"></el-table-column>
      <el-table-column prop="price" label="书本价格" min-width="70"></el-table-column>
      <el-table-column prop="booktype" label="书本类型" min-width="70"></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 {
    name: 'BookList',
    data: function() {
      return {
        bookname: null,
        result:[],
        total:0,
        page:1,
        rows:10
      }
    },
    methods: {
      query: function(page) {
        if(null!=page){
          this.page=page;
        }
        let url=this.axios.urls.BOOK_BOOKLIST;
        let params={
          bookname:this.bookname,
          methodName:'queryBookPager',
          page:this.page,
          rows:this.rows
        };
        this.axios.post(url,params).then(resp=>{
            console.log(resp.data.data.rows);
            this.result=resp.data.data.rows;
            this.total=resp.data.data.total;
        }).catch(resp=>{

        });
      },
      handleSizeChange:function(rows){
        this.rows=rows
        this.query(null);
      },
      handleCurrentChange:function(page){
        this.page=page;
        this.query(null);
      }
    }
  }
</script>

<style>
</style>

结果

在这里插入图片描述

XiaoZJun
关注
Vue（树表格分页）
m0_64863860的博客
10-12 647
t_module_vue表中已经配置了功能url，为方便，将书本管理组件定义为BookList。如果使用其他名字则需要修改功能url配置，保持一致。页面上使用的面包屑，查询条件，表格，分页等空间，可以查看element-ui官网。该步骤主要关注页面布局，并没有绑定数据，编写完成后，观察页面效果。在Main组件中指定的是用于显示各功能组件的。先不考虑分页，从后台接口获取数据并绑定到表格显示。菜单图标可以到官网去查找。图二： script部分。script部分，图一。
jquery插件--表格树--GridTree(后台分页版本20091018)(过期)
10-20
1.添加了表格树的后台分页代码 2.提供了两种表格树的样式选择 3.添加了全选按钮
EXT树表分页(SERVLET)
09-26
EXT 3.0 + SERVLET 开发的EXT树表分页功能. 包里包括了工程相关的所有东西(包括引用的EXT) 下载后部署就可用.
ElementUI之动态树+数据表格+分页
kissship的博客
09-26 848
动态树通常是指在网页或应用程序中创建可展开和折叠的树形结构，其中树的节点是动态加载的，通常是从服务器端获取的数据。这种树结构常用于导航菜单、文件浏览器、组织结构图等场景，用户可以展开或折叠节点以查看更多信息。注：本篇博客代码内容是基于上篇博客的代码而优化的（包括功能的实现也是），如需源码请点击前往上篇博客，如下：Kissship——ElementUI之首页导航与左侧菜单动态表格是指表格的列数和内容是根据数据或用户的输入动态生成的，通常用于展示不定数量的数据或根据不同的需求呈现不同的列。
关于ElementUI之动态树+数据表格+分页实例
最新发布
m0_74915426的博客
09-26 1736
并且在自己为菜单创建的接口里进行编写方法之后，再到实现类里面进行重新。配置文件中编写动态SQL。数据表的创建及数据添加。
VUE-动态树+数据表格+分页
weixin_63104855的博客
05-18 614
VUE-动态树+数据表格+分页
SPA项目开发之动态树形菜单+数据表格+分页
qq_43588771的博客
08-13 412
SPA项目开发之动态树形菜单+数据表格+分页树形菜单数据表格+分页 树形菜单 LeftNav.vue <template> <el-menu router :default-active="$route.path" class="el-menu-vertical-demo" background-color="#334157" text-color="#fff" activ...
java动态树形菜单与分页
01-16
java的动态树形菜单，和分页的实现，源码加数据库，可直接运行。
SPA之动态树+数据表格+分页
大屌的博客
08-13 199
动态树 首先，通过钩子函数获取数据。这里面的url则是你的请求路径，通过SSH获得数据， 然后定义一个变量来接收它。 data(){ return{ menus:[] } } created(){ let url = this.axios.urls.SYSTEM_MENU_TREE; this.axios.get(url, {}).then((response) => { ...
【记录】树型数据结构的分页
weixin_42777004的博客
08-03 1358
近日工作中遇到了后台自行组装的数据格式，某导说要进行分页，只能进行如下操作，弊端啥数据量大的情况下第一次加载会有点慢。。。 List<User> userList = dao.selecUserList(userDto); int cp =userDto.getPageNum(); int ps =userDto.getPageSize(); int totaCount = userList.size(); int totalPage = (totaCount -1) /u...
JAVA_树状表格分页(layUI、treeTable.js)
Junsy
09-26 5990
效果图展示(PS:本人很懒，刚开始想在网上随意找一个就用，后来发现好像PHP的不少，JAVA的树状表格大多数跟我开始写的一样没有分页，导致数据量过大后加载过于缓慢被客户吐糟，最后没找到合适的就自己写了一个简单的demo，不嫌弃的话可以自己再改改样式) 准备：layUI、treeTable.js 代码展示： <input id="total" type="hidden" value...
【java】树形结构分页（真分页）
阿杰
04-26 7190
对于一个查询来说，如果数据量是不断增加的，并且对于最高权限要显示全表数据，就必须考虑真了，那么树形结构如何真分页分页呢？网上找了好多，并没有一个具体的方案，只能自己想一个了 真分页: 即每次只从数据库取到相应的数据,然后返回,这样可以性能要比假分页高一些 假分页: 即查询数据库中符合条件的所有数据,然后在模型层,自己对list结果进行处理为相应的分页效果，或者由web进行分页展示 关联文章树形结构 需求 按照最顶级节点数分页，不是所有数据条数 返回一个树形结构 根据权限进行数据结构筛选 优化方案
SPA的动态树（菜单）、表格、分页
^.^的博客
09-28 271
SPA的动态树（菜单）、表格、分页 1.vue中如何修改[数组中][对象的值] data:{ empList:[{eid:1,ename:'zs'},{eid:2,ename:'ls'}] } this.empList[0].ename="zss";//vue 中是无法检测到根据索引值修改的数据变动的 解决方案：通过Vue数组变异方法可以动态控制数据的增减 // 第一...
C# 表达式树分页扩展（三）
CL10011314155的博客
09-15 241
一、前言 前面我们知道了表达树的基本知识，也明白了怎么遍历和修改一个表达式，这里我们就一个实际的场景来进行功能开发。 表达式系列目录 C# 表达式树讲解（一） C# 表达式树遍历（二） C# 表达式树分页扩展（三） C# 表达式树Lambda扩展（四） 二、分页扩展 在实际的开发中，肯定会遇到这样的应用场景，一个数据源需要在页面上进行分页显示，并且页面上需要对该数据源有一...
树形数据查找所有根节点并排序分页
weixin_40145080的博客
02-24 881
Service层 @Service public class DDeptclassifyServiceImpl implements DDeptclassifyService { @Autowired private DDeptMapper mapper; @Autowired private DeptMapper deptMapper; @Overrid...
SPA项目开发之动态树、数据表格、分页
qq_45384482的博客
08-26 381
文章目录效果展示动态生成NavMenu导航菜单(只支持2级菜单) 效果展示 思路： 1、准备好后台（左侧树，带分页的文章查询） 2、将左侧树的数据绑定到elementui中的menu标签上 3、新增一个自定义组件用来展示文章列表的 4、绑定elementui提供的分页组件来完成分页功能 动态生成NavMenu导航菜单(只支持2级菜单) ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值