ElementUI之动态树+数据表格+分页

目录

前言

一.ElementUI之动态树

1.前端模板演示

2.数据绑定

2.1 通过链接获取后台数据

2.2 对链接进行绑定

2.3添加动态路由

2.4 配置路由

3.效果演示

二.数据表格+动态分页

1.前端模板

 2.通过JS交互获取后端数据

3 效果演示


前言

 Element UI 是一个基于 Vue.js 的开源前端框架,用于构建用户界面。它提供了一套丰富的 UI 组件和工具,可以帮助开发者快速构建现代化的 web 应用程序。

官网:Element - 网站快速成型工具

一.ElementUI之动态树

1.前端模板演示

我们可以在官网-组件进行搜索:侧栏,就可以看到一个左侧的动态树

选择查看下面的代码进行复制

这里可以提供一段,当然,这只是一段模板,可以根据自己需求填写相关的信息

<el-menu><el-submenu index="" key=""><template slot="title"><i class=""></i><span></span></template><el-menu-item index="" key=""><i class=""></i><span></span></el-menu-item></el-submenu>
</el-menu>

2.数据绑定

2.1 通过链接获取后台数据

在对于的页面中编写方法请求数据地址并发起请求,绑定左侧菜单栏

export default {data() {return {collapsed: false,menu:[]}},created() {this.$root.bus.$on('shrink', t => {this.collapsed = t;});//获取后台请求数据的地址let url = this.axios.urls.SYSTEM_MENU;this.axios.get(url, {}).then(d => {this.menu=d.data.rows;}).catch(e => {});}}

2.2 对链接进行绑定

在api包中的action.js文件中进行绑定访问的链接地址

export default {'SERVER': 'http://localhost:8080/', //服务器'SYSTEM_USER_DOLOGIN': 'user/userLogin', //登陆'SYSTEM_USER_DOREG': 'user/userRegister', //注册'SYSTEM_MENU': 'module/queryRootNode', //注册左侧菜单树'getFullPath': k => { //获得请求的完整地址,用于mockjs测试时使用return this.SERVER + this[k];}
}

2.3添加动态路由

在我们要跳转的菜单栏添加动态路由

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

根据情况创建对应的目录结构,并创建相应的跳转页面示例:

2.4 配置路由

在router/index.js中配置

 {path: '/AppMain',name: 'AppMain',component: AppMain,children:[{path: '/LeftNav',name: 'LeftNav',component: LeftNav},{path: '/TopNav',name: 'TopNav',component: TopNav},{path: '/book/AddBook',name: 'AddBook',component: AddBook},{path: '/book/BookList',name: 'BookList',component: BookList}]},

3.效果演示

二.数据表格+动态分页

1.前端模板

<div class="Book" style="padding: 30px;"><!-- 输入框搜索 --><el-form :inline="true" class="demo-form-inline"><el-form-item label="书籍名称 : "><el-input v-model="bookname" placeholder="书籍名称"></el-input></el-form-item><el-form-item><el-button type="primary" plain @click="onSubmit">查询</el-button></el-form-item></el-form><!-- 书籍的书籍表格 --><el-table :data="tableData" style="width: 100%"><el-table-column prop="id" label="书籍ID"></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><!-- 分页 --><div class="block" style="padding: 20px;"><el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"background :page-sizes="[10, 20, 30, 40]" :page-size="rows" layout="total, sizes, prev, pager, next, jumper":total="total"></el-pagination></div></div>

前端组件功能详解 

  1. <div class="Book">:这是一个CSS类为"Book"的<div>元素,它可能用于样式控制或布局目的。

  2. 输入框搜索部分:

    • <el-form :inline="true" class="demo-form-inline">:这是一个Element UI的表单组件,设置为内联显示(:inline="true")。内联表单通常用于简单的搜索功能。
    • <el-form-item label="书籍名称 : ">:表单项,用于包裹输入框,并设置了一个标签文本"书籍名称"。
    • <el-input v-model="bookname" placeholder="书籍名称"></el-input>:这是一个Element UI的输入框组件,它使用v-model双向绑定到bookname数据属性,允许用户输入书籍名称,并设置了一个占位符文本"书籍名称"。
    • <el-button type="primary" plain @click="onSubmit">查询</el-button>:这是一个Element UI的按钮组件,用于触发查询操作。它被设置为主要按钮样式(type="primary"),并绑定了点击事件@click="onSubmit",当用户点击时会调用组件中的onSubmit方法。
  3. 书籍表格部分:

    • <el-table :data="tableData" style="width: 100%">:这是一个Element UI的表格组件,用于显示书籍列表数据。:data="tableData"将表格的数据与组件中的tableData数据属性绑定,style="width: 100%"设置表格宽度为100%。
    • <el-table-column prop="id" label="书籍ID"></el-table-column>:这是一个表格列组件,定义了一列书籍ID,使用prop属性指定数据属性名,label属性设置列标题。
    • 类似地,有三个更多的<el-table-column>用于显示书籍的名称、价格和类型。
  4. 分页部分:

    • <div class="block" style="padding: 20px;">:一个用于包裹分页组件的<div>元素,它可能用于样式控制或布局。
    • <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page" background :page-sizes="[10, 20, 30, 40]" :page-size="rows" layout="total, sizes, prev, pager, next, jumper" :total="total">:这是一个Element UI的分页组件,它允许用户在表格数据中进行分页浏览。在这里,它绑定了一些事件(@size-change@current-change),并使用属性绑定来配置分页的一些参数,包括当前页码、可选择的页大小列表、每页显示的行数、布局方式和总记录数。

总的来说,这个组件创建了一个用户可以输入书籍名称并点击查询按钮来搜索书籍的界面。搜索结果以表格的形式展示,并且提供了分页功能,以便在大量书籍数据中进行浏览。当用户更改页大小或切换页码时,会触发相应的事件,调用组件中的方法来获取并显示相应的书籍数据。

 2.通过JS交互获取后端数据

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}// console.log(params)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 => {console.log(url)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({})}}

方法详解: 

1.handleSizeChange(r): 当页大小发生变化时调用的方法,根据参数r(新的页大小)以及当前的booknamepage,构建请求参数并调用query方法进行数据查询。

handleCurrentChange(p): 当前页码大小发生变化时调用的方法,根据参数p(新的页码)以及当前的booknamerows,构建请求参数并调用query方法进行数据查询。

2.query(params): 发起后台请求书籍数据的方法,根据传入的参数params,发送GET请求到this.axios.urls.SYSTEM_BookList指定的后台接口地址,然后将返回的数据的rows(行数据)和total(总记录数)分别赋值给tableDatatotal

3.onSubmit(): 表单提交方法,在查询书籍数据时调用,根据当前的bookname构建请求参数并调用query方法进行数据查询,然后将bookname重置为空字符串

3 效果演示

 

今天的分享到这里就结束了,感谢各位大大的观看,各位大大的三连是博主更新的动力,感谢谢谢谢谢谢谢谢谢各位的支持!!!!! 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/90840.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

IDEA Debug技巧大全,看完就能提升工作效率

作者简介 目录 1.行断点 2.方法断点 3.异常断点 4.字段断点 5.条件表达式 1.行断点 行断点就是平时我们在代码行旁边单击鼠标打上的断点&#xff0c;这个没有什么好说的。关键点在于很多人不知道的&#xff0c;行断点其实是可以右击选择是对改行的全部调用都生效&#xf…

缓存一致性(cache coherency)解决方案:MESI 协议状态转换详解

MESI 协议 一&#xff0c;MESI状态释义二&#xff0c;MESI状态转换1 Invalid after Reset2, Invalid > Exclusive3, Exclusive > Modified4 Modified > Shared, Invalid > Shared5 Shared > Invalid, Shared > Modified 三&#xff0c;状态转换场景总结Inval…

Go语言strconv包

strconv包 参考资料 常用函数 函数功能备注Atoi(s string) (int, error)string转为intItoa(i int) stringint转为stringIsPrint(r rune) bool查询是否可以打印 了解函数 函数功能备注ParseBool(str string) (value bool, err error)返回字符串表示的bool值。它接受1、0、t…

最新影视视频微信小程序源码-带支付和采集功能/微信小程序影视源码PHP(更新)

源码简介&#xff1a; 这个影视视频微信小程序源码&#xff0c;新更新的&#xff0c;它还带支付和采集功能&#xff0c;作为微信小程序影视源码&#xff0c;它可以为用户 提供丰富的影视资源&#xff0c;包括电影、电视剧、综艺节目等。 这个小程序影视源码&#xff0c;还带有…

Vue之ElementUI实现登陆及注册

目录 ​编辑 前言 一、ElementUI简介 1. 什么是ElementUI 2. 使用ElementUI的优势 3. ElementUI的应用场景 二、登陆注册前端界面开发 1. 修改端口号 2. 下载ElementUI所需的js依赖 2.1 添加Element-UI模块 2.2 导入Element-UI模块 2.3 测试Element-UI是否能用 3.编…

APScheduler包——python tornado框架中实现定时任务

介绍&#xff1a; APScheduler的全称是Advanced Python Scheduler。它是一个轻量级的 Python 定时任务调度框架。APScheduler 支持三种调度任务&#xff1a;固定时间间隔&#xff0c;固定时间点&#xff08;日期&#xff09;&#xff0c;Linux 下的 Crontab 命令。同时&#xf…

IOTE 2023盛况回顾,美格智能聚连接之力促数字新生长

9月20~22日&#xff0c;IOTE国际物联网展深圳站在深圳国际会展中心正式召开。本届展会以“IoT构建数字经济底座”为主题&#xff0c;聚焦物联网技术助推数字经济发展的核心动力。美格智能携前沿技术成果亮相展会&#xff0c;与参展观众深入交流。 展会上&#xff0c;美格智能带…

TCP/IP网络江湖——数据链路层的防御招式(数据链路层下篇:数据链路层的安全问题)

目录 引言 一、 数据链路层的隐私与保密 二、数据链路层的安全协议与加密

SpringCloud Gateway--Predicate/断言(详细介绍)中

&#x1f600;前言 本篇博文是关于SpringCloud Gateway–Predicate/断言&#xff08;详细介绍&#xff09;中&#xff0c;希望你能够喜欢 &#x1f3e0;个人主页&#xff1a;晨犀主页 &#x1f9d1;个人简介&#xff1a;大家好&#xff0c;我是晨犀&#xff0c;希望我的文章可以…

人工智能AI知多少?

摘要 人工智能(Artificial Intelligence,简称AI)是一项前沿技术,正在快速发展并渗透到各个领域。然而,对于大多数人来说,人工智能仍然是一个陌生而复杂的概念。本文旨在对人工智能进行扫盲,介绍其基本概念、应用领域以及当前热门的人工智能模型。通过具体的例子,读者将…

electron之快速上手

前一篇文章已经介绍了如何创建一个electron项目&#xff0c;没有看过的小伙伴可以去实操一下。 接下来给大家介绍一下electron项目的架构是什么样的。 electron之快速上手 electron项目一般有两个进程&#xff1a;主进程和渲染进程。 主进程&#xff1a;整个项目的唯一入口&…

大数据flink篇之一-基础知识

一、起源 2010至2014年间&#xff0c;由柏林工业大学、柏林洪堡大学和哈索普拉特纳研究所联合发起名Stratosphere的研究项目。2014年4月&#xff0c;项目贡献给Apache基金会&#xff0c;成为孵化项目。更名为Flink2014年12月&#xff0c;成为基金会顶级项目2015年9月&#xff…

分析一段js加密代码

源代码 (function(){var KBP,EbW482-471;function wHY(r){var y2043987;var lr.length;var a[];for(var g0;g<l;g){a[g]r.charAt(g)};for(var g0;g<l;g){var vy*(g289)(y%39401);var ty*(g287)(y%31258);var xv%l;var pt%l;var ma[x];a[x]a[p];a[p]m;y(vt)%2251814;};re…

搭建自己的搜索引擎之五

一、前言 接上文 搭建自己的搜索引擎之四&#xff0c;下面继续介绍茴香豆茴字的另外两种写法。 二、Jest Jest是ES的Java Http Rest客户端&#xff0c;它主要是为了弥补以前ES自有API缺少HttpRest接口客户端的不足&#xff0c;但因为现在ES官方已经提供了RestClient ,该项目已…

JIT介绍

JIT全称&#xff1a;Just in time。中文译为&#xff1a;即时的、实时的。 JVM中的这项技术名为&#xff1a;实时编译技术&#xff0c;也叫即时编译技术。就是在java程序运行的过程中&#xff0c;将字节码编译为机器码运行在本地&#xff0c;而不是通过JVM解释运行&#xff08;…

C++ -- 特殊类设计

目录 设计一个类&#xff0c;不能被拷贝 C98的做法 C11的做法 设计一个类&#xff0c;只能在堆上创建对象 实现方式1 实现方式2 设计一个类&#xff0c;只能在栈上创建对象 实现方式1 方式1的优化 实现方式2 设计一个类&#xff0c;不能被继承 设计模式 什么是设计…

正则表达式在java里的运用

文章目录 前言一、什么是正则表达式&#xff1f;二、使用步骤1.判断数字2.判断包含某个字符串 总结 前言 例如&#xff1a;随着人工智能的不断发展&#xff0c;机器学习这门技术也越来越重要&#xff0c;很多人都开启了学习机器学习&#xff0c;本文就介绍了机器学习的基础内容…

计算机竞赛 深度学习实现行人重识别 - python opencv yolo Reid

文章目录 0 前言1 课题背景2 效果展示3 行人检测4 行人重识别5 其他工具6 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; **基于深度学习的行人重识别算法研究与实现 ** 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff0c…

Linux 安全 - Capabilities机制

文章目录 前言一、简介二、Capabilities list2.1 POSIX-draft defined capabilities2.2 Linux-specific capabilities 三、 Past and current implementation四、Thread capability sets五、File capabilities六、Transformation of capabilities during execve()七、Capabilit…

mmpretrain学习笔记

深度学习模型的训练涉及几个方面 1、模型结构&#xff1a;模型有几层、每层多少通道数等 2、数据&#xff1a;数据集划分、数据文件路径、批大小、数据增强策略等 3、训练优化 &#xff1a;梯度下降算法、学习率参数、训练总轮次、学习率变化策略等 4、运行时&#xff1a;GPU、…