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>() {@Overridepublic 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();@Overridepublic 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')

动态树+数据表格+分页相关推荐

vue09动态树+数据表格+分页模糊查
14天阅读挑战赛努力是为了不平庸~ 目录 1. 准备工作 2. 动态树 2.1 在配置请求路径 2.2 使用动态数据构建导航菜单 2.2.1 通过接口获取数据 2.2.3 通过后台获取的数据构建菜单 ...
09 动态树+数据表格+分页+增删改
前言这篇文章是继上一篇文章的增删改查功能的实现一.动态树效果图我们将在上一次课中的LeftAside.vue中完成动态树的实现主要代码在Element官网 NavMenu 导航菜单中的侧栏 ...
SPA项目开发之动态树+数据表格+分页
目录一.树形菜单 1.要确定静态树形菜单节点的样式排版 2.要获取树形节点的数据 3.通过拿到的数据,渲染树形节点二.书籍列表查询一.树形菜单 1.要确定静态树形菜单节点的样式排版 <el ...
JSP根据状态动态改变数据表格按钮
有时候在开发的过程中会遇到需要根据状态ID 来动态改变数据表格的按钮,下面我主要讲述两种表格根据ID改变按钮的方式. 下面这种我是用EL 表达式获取表格中的值: <table class=&qu ...
Layui数据表格分页通过两种方法实现
SSM框架+Layui框架实现数据表格分页效果图如下所示: 具体实现方法: 方法一:(基于前台进行分页) 实现思路:主要是后台将全部数据返回到前台,之后前台通过Layui的parseData函数来实现 ...
layui数据表格分页无法正常显示
layui数据表格分页无法正常显示应该先利用layui table中的parseData方法手动将数据切片分页,代码如下,要点是parseData: function(res){}中的方法,对从ur ...
JAVA_树状表格分页(layUI、treeTable.js)
效果图展示(PS:本人很懒,刚开始想在网上随意找一个就用,后来发现好像PHP的不少,JAVA的树状表格大多数跟我开始写的一样没有分页,导致数据量过大后加载过于缓慢被客户吐糟,最后没找到合适的就自己写了 ...
java实现layui静态表格分页,layui——数据表格分页实例
layui实现数据表格table分页功能,异步加载,表格渲染.总体流程:layui的数据表格设置分页参数开启可以从请求中看到如下图,所以我们需要在后端控制器接收分页数据page和limit进行操作,下 ...
layui 数据表格+分页
废话不多说了,以下是本少爷用过的layui 的实例经验,看代码: layui使用经验: 1.HTML 搜索输入框 <form class="layui-form">&l ...

动态树+数据表格+分页

1. 后台数据

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

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

2.3 数据表格

2.4Pagination 分页

2.5综合代码演示

后台代码

前端代码

运行效果图

动态树+数据表格+分页相关推荐

最新文章

热门文章