大型网站建设优化企业,招聘网站建设与开发要求,在线ps图,标志设计英文一、导言 1、引言 在现代软件开发中#xff0c;动态树、数据表格以及分页效果成为了许多应用的核心需求。随着业务规模和复杂性的增加#xff0c;我们往往需要展示大量的层级结构数据#xff0c;并且实现交互性强且高效的操作。 动态树提供了一种组织结构清晰、可伸缩的展示… 一、导言 1、引言 在现代软件开发中动态树、数据表格以及分页效果成为了许多应用的核心需求。随着业务规模和复杂性的增加我们往往需要展示大量的层级结构数据并且实现交互性强且高效的操作。 动态树提供了一种组织结构清晰、可伸缩的展示方式使用户可以方便地查看和操作树节点。数据表格则是以表格形式呈现数据在其中用户可以进行排序、筛选、编辑等操作。 而分页效果则能够将大量数据分割成易于管理和浏览的一页或一页的内容。这三种功能的结合不仅使得我们能够更好地处理庞大的数据集合同时也使得用户能够快速定位所需信息。 本文将介绍如何使用现代前端技术实现动态树、数据表格及分页效果从而为您的应用带来更好的用户体验。 2、目的 使用Element UI实现动态树、数据表格及分页效果的目的主要有以下几点 提供美观和易用的用户界面Element UI是一套基于Vue.js的组件库它提供了丰富的UI组件和样式风格能够帮助开发者快速构建漂亮、易用的用户界面。通过使用Element UI我们可以为动态树、数据表格及分页等功能提供统一而一致的外观和交互体验让用户感到舒适和愉悦。快速开发和定制化能力Element UI提供了丰富多样的预定义组件和样式使得开发者无需从零开始构建这些功能而是可以直接利用已有的组件来实现动态树、数据表格和分页效果。此外Element UI还支持灵活的定制化选项和主题配置可以根据具体项目需求进行个性化的设计和样式修改节省了开发时间和成本。高度可扩展和可维护性Element UI的组件库经过大量的实战项目验证拥有稳定的架构和优秀的代码质量易于维护和扩展。通过使用Element UI我们可以利用预定义的组件和API结合自定义业务逻辑来构建复杂的动态树、数据表格及分页功能。同时Element UI还提供了丰富的文档和社区资源方便开发者查找问题和分享经验。 二、动态树 根据我们的数据库的数据进行一个我们想要的一个动态树效果 1、后端数据接口定义 在数据的sql下面也就是树形菜单的sqlxml文件里面 resultMap idBaseResultMap typecom.zking.ssm.model.Module id columnid jdbcTypeINTEGER propertyid /result columnpid jdbcTypeINTEGER propertypid /result columntext jdbcTypeVARCHAR propertytext /result columnicon jdbcTypeVARCHAR propertyicon /result columnurl jdbcTypeVARCHAR propertyurl /result columnsort jdbcTypeINTEGER propertysort /collection propertymodules ofTypecom.zking.ssm.model.Modulecolumnid selectqueryChildNodeByPid/
/resultMap
sql idBase_Column_List id, pid, text, icon, url, sort
/sql
!--先根据id查询菜单根级目录再利用上次查询结果collection中column的值id作为递归查询条件查出所有子菜单返回结果必须为resultMap并且值为上面构建的resultMap的id值--
select idqueryChildNodeByPid resultMapBaseResultMap parameterTypeintselect include refidBase_Column_List/ from t_module_vuewhere pid#{value}
/select Controller层 RequestMapping(/queryRootNode)ResponseBodypublic JsonResponseBodyListModule queryRootNode(){try {ListModule modules moduleService.queryRootNode(-1);return new JsonResponseBody(OK,true,0,modules);} catch (Exception e) {e.printStackTrace();return new JsonResponseBody(初始化首页菜单错误,false,0,null);}} 2、前端导航菜单绑定 2.1、页面布局
菜单结构
!-- 添加动态路由router :default-active$route.path--el-menu router :default-active$route.path default-active2 classel-menu-vertical-demobackground-color#334157text-color#fff active-text-color#ffd04b :collapsecollapsed!-- el-menu default-active2 :collapsecollapsed collapse-transition router :default-active$route.path unique-opened classel-menu-vertical-demo background-color#334157 text-color#fff active-text-color#ffd04b --div classlogoboximg classlogoimg src../assets/img/logo.png alt/divel-submenu v-form in menus :indexindex_m.id :keykey_m.idtemplate slottitlei :classm.icon/ispan{{ m.text }}/span/templateel-menu-item v-form2 in m.modules :indexm2.url :keykey_m2.idi :classm2.icon/ispan{{ m2.text }}/span/el-menu-item/el-submenu/el-menu 第一级节点el-submenu中key属性唯一index属性唯一而index属性用于控制菜单折叠 第二级节点el-menu-item中key属性唯一index属性唯一而index属性用于控制页面跳转 vueelement的el-menu组件实现路由跳转及当前项的设置
router :default-active$route.path 要实现路由跳转先要在el-menu标签上添加router属性然后只要在每个el-menu-item标签内的index属性设置一下url即可实现点击el-menu-item实现路由跳转。导航当前项在el-menu标签中绑定 :default-active$route.path注意是绑定属性不要忘了加“:”当$route.path等于el-menu-item标签中的index属性值时则该item为当前项。el-submenu标签中的url属性不能为空且不能相同否则会导致多个节点收缩/折叠效果相同的问题。 2.2、数据绑定 created() {this.$root.Bus.$on(sjm, v {this.collapsed v;});
//树形菜单//后台访问地址let url this.axios.urls.SYSTEM_MENUS;this.axios.get(url, {}).then(r {
//利用数组接受后台的数据this.menus r.data.rows;}).catch(error {})}
2.3、路由绑定页面编写
路由绑定 跳转页面编写 根据自己的来就行 效果 三、数据表格及分页 1、后端数据接口定义 package com.zking.ssm.controller;import com.zking.ssm.model.Book;
import com.zking.ssm.service.IBookService;
import com.zking.ssm.util.JsonResponseBody;
import com.zking.ssm.util.PageBean;
import com.zking.ssm.vo.BookFileVo;
import org.apache.commons.io.IOUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.FileInputStream;
import java.io.InputStream;
import java.io.OutputStream;
import java.net.URLEncoder;
import java.util.List;
import java.util.Map;Controller
RequestMapping(/book)
public class BookController {Autowiredprivate IBookService bookService;RequestMapping(/queryBookPager)ResponseBodypublic JsonResponseBodyListBook queryBookPager(Book book, HttpServletRequest req){try {PageBean pageBeannew PageBean();pageBean.setRequest(req);ListBook books bookService.queryBookPager(book, pageBean);return new JsonResponseBody(OK,true,pageBean.getTotal(),books);} catch (Exception e) {e.printStackTrace();return new JsonResponseBody(分页查询书本失败,false,0,null);}}}2、前端 表格中prop属性要和后端的实体类的属性名一样不然数据会显示不出来。 templatediv classBook stylepadding: 30px;!-- 输入框搜索 --el-form :inlinetrue classdemo-form-inlineel-form-item label书籍名称 : el-input v-modelbookname placeholder书籍名称/el-input/el-form-itemel-form-itemel-button typeprimary plain clickonSubmit查询/el-button/el-form-item/el-form!-- 书籍的书籍表格 --el-table :datatableData stylewidth: 100%el-table-column propid label书籍ID/el-table-columnel-table-column propbookname label书籍名称/el-table-columnel-table-column propprice label书籍价格/el-table-columnel-table-column propbooktype label书籍类型/el-table-column/el-table!-- 分页 --div classblock stylepadding: 20px;el-pagination size-changehandleSizeChange current-changehandleCurrentChange :current-pagepagebackground :page-sizes[10, 20, 30, 40] :page-sizerowslayouttotal, sizes, prev, pager, next, jumper:totaltotal/el-pagination/div/div/templatescript
export default {data() {return {bookname: ,tableData: [],rows: 10,total: 0,page: 1}},methods: {handleSizeChange(r) {//当页大小发生变化let params {bookname: this.bookname,rows: r,page: this.page}this.query(params);},handleCurrentChange(p) {//当前页码大小发生变化let params {bookname: this.bookname,rows: this.rows,// 分页page: p}// console.log(params)this.query(params);},query(params) {//获取后台请求书籍数据的地址let url this.axios.urls.SYSTEM_BOOKLIST;this.axios.get(url, {params: params}).then(d {this.tableData d.data.rows;this.total d.data.total;}).catch(e {});},onSubmit() {let params {bookname: this.bookname}console.log(params)this.query(params);this.bookname }},created() {this.query({})}
}
/scriptstyle
/style效果
