动态树+数据表格+分页

已于 2022-05-14 16:13:11 修改
阅读量356 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 入门 文章标签： vue.js elementui javascript
于 2022-05-14 16:12:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_66587374/article/details/124769208

目录

1. 后台数据

2. 动态生成NavMenu导航菜单(只支持2级菜单        2.1 结构      

        2.2 vue+element的el-menu组件实现路由跳转及当前项的设置

        2.3 数据表格

        2.4Pagination 分页

        2.5综合代码演示

                后台代码

                前端代码

                运行效果图

1. 后台数据

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,'玄幻');



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;

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);

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` */

/*!40101 SET SQL_MODE=@OLD_SQL_MODE */;
/*!40014 SET FOREIGN_KEY_CHECKS=@OLD_FOREIGN_KEY_CHECKS */;

2. 动态生成NavMenu导航菜单(只支持2级菜单
        2.1 结构      

 <el-menu key="" index="">
        <el-submenu>
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>导航一</span>
          </template>
          <template slot="title">分组一</template>
          <el-menu-item route="">

 

        2.2 vue+element的el-menu组件实现路由跳转及当前项的设置
 

    <el-menu router :default-active="$route.path">
    <el-menu-item index="/company/userManager">用户管理</el-menu-item>


      注1：要实现路由跳转，先要在el-menu标签上添加router属性，然后只要在每个el-menu-item标签内
           的index属性设置一下url即可实现点击el-menu-item实现路由跳转。
      注2：导航当前项，在el-menu标签中绑定  :default-active="$route.path",注意是绑定属性，
           不要忘了加“:”,当$route.path等于el-menu-item标签中的index属性值时则该item为当前项。

      注3：后台t_tree_node表有几个节点的url为空，则会导致几个节点样式会一致

        2.3 数据表格

<el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="编号" >
      </el-table-column>
      <el-table-column prop="bookname" label="书本名称" >
      </el-table-column>
      <el-table-column prop="price" label="书本价格">
      </el-table-column>
      <el-table-column prop="booktype" label="书本类型">
      </el-table-column>
     <el-table-column  label="书本操作">
        <el-button type="danger" class="el-icon-delete" @click="del">删除</el-button>
      </el-table-column>
    </el-table>

 

        2.4Pagination 分页

当数据量过多时，使用分页分解数据。

 <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>

        2.5综合代码演示

                后台代码

package com.zking.vue.dao;

import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.List;


import com.zking.vue.entity.Book;
import com.zking.vue.entity.User;
import com.zking.vue.util.CommonUtils;
import com.zking.vue.util.PageBean;
import com.zking.vue.util.StringUtils;

public class BookDao extends BaseDao<Book> {

	public List<Book> queryBookPager(Book book,PageBean pageBean){
		String sql="select id,bookname,price,booktype from t_book_vue where 1=1";
		if(StringUtils.isNotBlank(book.getBookname()))
			sql+=" and bookname like '%"+book.getBookname()+"%'";
		if(StringUtils.isNotBlank(book.getBooktype()))
			sql+=" and booktype like '%"+book.getBooktype()+"%'";
		sql+=" order by id desc";
		
		return super.executeQuery(sql, pageBean, new CallBack<Book>() {
			@Override
			public List<Book> forEach(ResultSet rs) throws SQLException {
				return CommonUtils.toList(rs, Book.class);
			}
		});
	} 

}

package com.zking.vue.action;

import java.io.IOException;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.zking.mvc.framework.DispatcherAction;
import com.zking.mvc.framework.ModelDriver;
import com.zking.vue.dao.BookDao;
import com.zking.vue.entity.Book;
import com.zking.vue.entity.Module;
import com.zking.vue.util.PageBean;

public class BookAction extends DispatcherAction implements ModelDriver<Book> {
	private Book book=new Book();
	private BookDao bookDao=new BookDao();
	private ObjectMapper mapper=new ObjectMapper();
	@Override
	public Book getModel() {
		return book;
	}

	public String queryBookPager(HttpServletRequest req,HttpServletResponse resp)
			throws ServletException,IOException{
		PageBean pageBean=new PageBean();
		pageBean.setRequest(req);
		List<Book> books = bookDao.queryBookPager(book, pageBean);
		Map<String,Object> map=new HashMap<String,Object>();
		Map<String,Object> data=new HashMap<String,Object>();
		data.put("rows", books);
		data.put("total", pageBean.getTotal());
		map.put("data", data);
		map.put("success", true);
		map.put("msg", "OK");
		mapper.writeValue(resp.getOutputStream(),map);
		return null;
	}

}

                前端代码

<template>
  <div class="div-main">
    <!-- 1.面包屑，路径导航-->
    <el-breadcrumb style="font-size: 16px;" separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>书本列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 2.搜索栏-->
    <el-form :inline="true" style="margin-top: 15px;margin-bottom: -15px;">
      <el-form-item label="书本名称">
        <el-input v-model="bookname" placeholder="书本名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="query(1)">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 3.数据表格-->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="编号" >
      </el-table-column>
      <el-table-column prop="bookname" label="书本名称" >
      </el-table-column>
      <el-table-column prop="price" label="书本价格">
      </el-table-column>
      <el-table-column prop="booktype" label="书本类型">
      </el-table-column>
     <el-table-column  label="书本操作">
        <el-button type="danger" class="el-icon-delete" @click="del">删除</el-button>
      </el-table-column>
    </el-table>
    <!-- 4.分页栏-->
     <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: '',
        tableData:[],
        page:1,
        rows:10,
        total:0,
        id:''
      }
    },
    methods: {
      del:function(){
         let url=this.axios.urls.BOOK_MANAGER;
          let params={
            methodName:'DalBook',
            id:this.id
          };
          //发起ajax请求
          this.axios.post(url,params).then(resp=>{
            let data=resp.data.data;
             console.log(data);
            console.log(id);
          }).catch(err=>{
            console.log('失败');
            console.log(err);
            console.log(id);
          });
      },
      //每页显示条数的改变事件
      handleSizeChange:function(r){
        console.log(r);
        this.rows=r;
       // this.page=1;
        this.query(1);
      },
       //当前页面的改变事件
      handleCurrentChange:function(p){
        console.log(p);
        //this.page=p;
        this.query(p);
      },
      query: function(p) {
        this.page=p;
          let url=this.axios.urls.BOOK_MANAGER;
          //定义请求参数
          let params={
            methodName:'queryBookPager',
            bookname:this.bookname,
            page:p,
            rows:this.rows
          };
          //发起ajax请求
          this.axios.post(url,params).then(resp=>{
            let data=resp.data.data;
            console.log(data);
            this.total=data.total;
            this.tableData=data.rows;
          }).catch(err=>{
            console.log(err);
          });
      }
    }
  }
</script>

<style>
  .div-main {
    margin: 15px;
  }
</style>

                运行效果图


附录一：vue中如何修改[数组中][对象的值]
   data:{
     empList:[{eid:1,ename:'zs'},{eid:2,ename:'ls'}]
   }

   this.empList[0].ename="zss";//vue 中是无法检测到根据索引值修改的数据变动的

   解决方案：通过Vue数组变异】法可以动态控制数据的增减
   // 第一个参数是要修改的数据, 第二个值是修改当前数组的哪一个字段,第三个是要修改为什么值
   this.$set(this.empList[index], 'ename', 'zss')
   或者
   Vue.set(this.empList[index], 'ename', 'zss') 
 


 

ElementUI之动态树+数据表格+分页
kissship的博客
09-26 882
动态树通常是指在网页或应用程序中创建可展开和折叠的树形结构，其中树的节点是动态加载的，通常是从服务器端获取的数据。这种树结构常用于导航菜单、文件浏览器、组织结构图等场景，用户可以展开或折叠节点以查看更多信息。注：本篇博客代码内容是基于上篇博客的代码而优化的（包括功能的实现也是），如需源码请点击前往上篇博客，如下：Kissship——ElementUI之首页导航与左侧菜单动态表格是指表格的列数和内容是根据数据或用户的输入动态生成的，通常用于展示不定数量的数据或根据不同的需求呈现不同的列。
树表格的实现
weixin_33701617的博客
08-16 418
有时候我们会遇到表格树的展示，类似于下图的需求： 其中组件的封装主要在table-tree文件夹内： main.vue的内容如下： 1 <template> 2 <el-table :data="formatData" 3 :stripe="option.stripe" 4 :r...
C# 表达式树分页扩展（三）
CL10011314155的博客
09-15 249
一、前言 前面我们知道了表达树的基本知识，也明白了怎么遍历和修改一个表达式，这里我们就一个实际的场景来进行功能开发。 表达式系列目录 C# 表达式树讲解（一） C# 表达式树遍历（二） C# 表达式树分页扩展（三） C# 表达式树Lambda扩展（四） 二、分页扩展 在实际的开发中，肯定会遇到这样的应用场景，一个数据源需要在页面上进行分页显示，并且页面上需要对该数据源有一...
EXT树表分页(SERVLET)
09-26
EXT 3.0 + SERVLET 开发的EXT树表分页功能. 包里包括了工程相关的所有东西(包括引用的EXT) 下载后部署就可用.
【java】树形结构分页（真分页）
阿杰
04-26 7354
对于一个查询来说，如果数据量是不断增加的，并且对于最高权限要显示全表数据，就必须考虑真了，那么树形结构如何真分页分页呢？网上找了好多，并没有一个具体的方案，只能自己想一个了 真分页: 即每次只从数据库取到相应的数据,然后返回,这样可以性能要比假分页高一些 假分页: 即查询数据库中符合条件的所有数据,然后在模型层,自己对list结果进行处理为相应的分页效果，或者由web进行分页展示 关联文章树形结构 需求 按照最顶级节点数分页，不是所有数据条数 返回一个树形结构 根据权限进行数据结构筛选 优化方案
关于ElementUI之动态树+数据表格+分页实例
m0_74915426的博客
09-26 1789
并且在自己为菜单创建的接口里进行编写方法之后，再到实现类里面进行重新。配置文件中编写动态SQL。数据表的创建及数据添加。
VUE-动态树+数据表格+分页
weixin_63104855的博客
05-18 623
VUE-动态树+数据表格+分页
vue09动态树+数据表格+分页模糊查
全栈
10-28 3747
努力是为了不平庸~1. 准备工作2. 动态树2.1 在配置请求路径在src/api/action.js中配置获取动态树数据的请求路径2.2 使用动态数据构建导航菜单。
【项目】Java树形结构集合分页，java对list集合进行分页
someday____的博客
03-07 2488
判断key是否存在，如果存在，直接取缓存的值 ，不存在就从数据库查出数据，并把值存到redis里。avue-crud 组件加上:page.sync=“page”商品类目树数据量大导致加载太慢，需添加一个分页功能。首先把数据根据创建时间倒序排列，再进行分页。
ExtJs3.* 分页树 Ext.ux.tree.PagingTreeLoader
05-17
当树节点较多的时候很好用，具体的可以下载下来试试
Extjs树分页组件扩展
03-04
实现对Ext树进行分页的组件，扩展了TreeLaoder和PagingToobar
Extjs2分页树 带查询功能
04-03
NULL 博文链接：https://babydeed.iteye.com/blog/1468695
基于jqgrid实现树形菜单分页列表查询
01-14
基于jqgrid实现类似父子级树形菜单分页列表查询，让table页的行元素可以实现像ztree那样的上下级关系
jquery插件--表格树--GridTree(后台分页版本20091018)(过期)
10-20
1.添加了表格树的后台分页代码 2.提供了两种表格树的样式选择 3.添加了全选按钮
mysql树形结构分页_非递归法实现论坛树型结构及分页！！（心血结晶啊，呵呵）...
weixin_39710251的博客
01-20 735
简介：这是非递归法实现论坛树型结构及分页！！(心血结晶啊，呵呵)的详细页面，介绍了和php,有关的知识、技巧、经验，和一些php源码等。 class='pingjiaF' frameborder='0' src='http://biancheng.dnbcw.info/pingjia.php?id=327695' scrolling='no'>现将本人的实践结果show给大家，不足之处就是分...
java树结构查询及分页
weixin_45326523的博客
06-26 3366
树结构查询
优雅的对树形结构进行高性能分页，闭包表才是yyds
最新发布
方志朋的博客
03-04 965
一、定义的概述闭包表（Closure Table）是一种用于存储和查询树形数据结构的技术，它通过在关系表中记录树节点之间的直接和间接关系来表示节点之间的层次结构。闭包表的设计目的是支持高效的树遍历和查询操作。二、闭包表的特点闭包表通常是一个包含两个主要列的表：祖先列和后代列。每一行记录都表示一对节点之间的关系，其中祖先列存储父节点（或祖先节点）的标识，后代列存储子节点（或后代节点）的标识。通过在闭...
59EasyUI 树形菜单- 树形网格添加分页
阿甘兄
04-18 673
本教程展示如何向带有动态加载特性的树形网格（TreeGrid）添加分页。 创建树形网格（TreeGrid） 启用树形网格（TreeGrid）的分页特性，必须添加 ‘pagination:true’ 属性，这样页面加载时就会向服务器发送 ‘page’ 和 ‘rows’ 参数。 <table title="Products" class="easyui-treegrid" style=...
树形表格treeTable：实现数据表格核心功能
2. **数据表格功能**: 树形表格保留了传统数据表格的核心功能，如排序、搜索、分页等。这使得用户可以像操作普通数据表格一样，通过这些功能对数据进行快速查找和管理。 3. **懒加载**: 懒加载是treeTable-lay的一...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值