Javaweb之Vue组件库Element案例的详细解析

4.4 案例

4.4.1 案例需求

参考 资料/页面原型/tlias智能学习辅助系统/首页.html 文件,浏览器打开,点击页面中的左侧栏的员工管理,如下所示:

需求说明:

  1. 制作类似格式的页面

    即上面是标题,左侧栏是导航,右侧是数据展示区域

  2. 右侧需要展示搜索表单

  3. 右侧表格数据是动态展示的,数据来自于后台

  4. 实际示例效果如下图所示:

数据Mock地址:http://yapi.smart-xwork.cn/mock/169327/emp/list,浏览器打开,数据格式如下图所示:

通过观察数据,我们发现返回的json数据的data属性中,才是返回的人员列表信息

4.4.2 案例分析

整个案例相对来说功能比较复杂,需求较多,所以我们需要先整体,后局部细节。整个页面我们可以分为3个部分,如下图所示:

一旦这样拆分,那么我们的思路就清晰了,主要步骤如下:

  1. 创建页面,完成页面的整体布局规划

  2. 然后分别针对3个部分进行各自组件的具体实现

  3. 针对于右侧核心内容展示区域,需要使用异步加载数据,以表格渲染数据

4.4.3 代码实现

4.4.3.1 环境搭建

首先我们来到VS Code中,在views目录下创建 tlias/EmpView.vue这个vue组件,并且编写组件的基本模板代码,其效果如下图所示:其中模板代码在之前的案例中已经提供,此处不再赘述

并且需要注意的是,我们默认访问的是App.vue这个组件,而我们App.vue这个组件之前是引入了element-view这个组件,此时我们需要修改成引入emp-view这个组件,并且注释掉之前的element-view这个组件,此时App.vue整体代码如下:

<template><div id="app"><!-- {{message}} --><!-- <element-view></element-view> --><emp-view></emp-view></div>
</template>
​
<script>
import EmpView  './views/tlias/EmpView.vue'
// import ElementView  './views/Element/ElementView.vue'
export default {components: {EmpView },data(){return {"message":"hello world"}}
}
</script>
<style>
​
</style>

打开浏览器,我们发现之前的element案例内容没了,从而呈现的是一片空白,那么接下来我们就可以继续开发了。

4.4.3.2 整体布局

此处肯定不需要我们自己去布局的,我们直接来到ElementUI的官网,找到布局组件,如下图所示:

从官网提供的示例,我们发现由现成的满足我们需求的布局,所以我们只需要做一位代码搬运工即可。拷贝官方提供的如下代码直接粘贴到我们EmpView.vue组件的template模块中即可:

<el-container><el-header>Header</el-header><el-container><el-aside width="200px">Aside</el-aside><el-main>Main</el-main></el-container>
</el-container>

打开浏览器,此时呈现如下效果:

因为我们没有拷贝官方提供的css样式,所以和官方案例的效果不太一样,但是我们需要的布局格式已经有,具体内容我们有自己的安排。首先我们需要调整整体布局的高度,所以我们需要在<el-container>上添加一些样式,代码如下:

<!-- 设置最外层容器高度为700px,在加上一个很细的边框 -->
<el-container style="height: 700px; border: 1px solid #eee">

到此我们布局功能就完成了

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

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

相关文章

泛微OA对接金蝶云星空方案分享(对接场景解析)

分享金蝶云星空跟泛微OA系统集成对接的方案分享&#xff0c;主讲审批流程对接&#xff0c;表单对接的两类场景。分别是金蝶云星空发起申请和泛微发起流程审批&#xff0c;最终实现统一管理。 数据集成主要有以下好处&#xff1a; &#xff08;1&#xff09;数据一致性&#xf…

吉利展厅 | 透明OLED拼接2x2:科技与艺术的完美融合

产品&#xff1a;4块55寸OLED透明拼接屏 项目地点&#xff1a;南宁 项目时间&#xff1a;2023年11月 应用场景&#xff1a;吉利展厅 在2023年11月的南宁&#xff0c;吉利展厅以其独特的展示设计吸引了众多参观者的目光。其中最引人注目的亮点是展厅中央一个由四块55寸OLED透…

函数的极值与最值

函数的最值 1.闭区间上连续函数的最值 1.求驻点或不可导点&#xff08;可能的极值点&#xff09; 2.求函数在驻点&#xff0c;不可导点&#xff0c;端点的函数值 3.比较大小 例题&#xff1a; 例题思想&#xff1a;分段函数分段点必须验证导数的存在性 几种常见的最值类型 1.…

WordPress自动采集伪原创发布工具

在当今数字化时代&#xff0c;随着信息爆炸式增长&#xff0c;网站内容的更新速度飞快。对于拥有WordPress网站的用户而言&#xff0c;如何轻松而又快速地批量采集伪原创内容成为一项具有挑战性的任务。本文将专心分享一些方法和技巧&#xff0c;帮助WordPress用户实现批量采集…

软件设计模式原则(三)单一职责原则

单一职责原则&#xff08;SRP&#xff09;又称单一功能原则。它规定一个类应该只有一个发生变化的原因。所谓职责是指类变化的原因。如果一个类有多于一个的动机被改变&#xff0c;那么这个类就具有多于一个的职责。而单一职责原则就是指一个类或者模块应该有且只有一个改变的原…

王道p150 14.假设二叉树采用二叉链表存储结构,设计一个算法,求非空二叉树 b的宽度(即具有结点数最多的那一层的结点个数) (c语言代码实现)

采用层次遍历的方法求出所有结点的层次&#xff0c;并将所有结点和对应的层次放在一个队列中。然后通过扫描队列求出各层的结点总数&#xff0c;最大的层结点总数即为二叉树的宽度。 /* A B C D E F …

生成式AI与预测式AI的主要区别与实际应用

近年来&#xff0c;预测式人工智能&#xff08;Predictive AI&#xff09;通过先进的推荐算法、风险评估模型、以及欺诈检测工具&#xff0c;一直在推高着该领域公司的投资回报率。然而&#xff0c;今年初突然杀出的生成式人工智能&#xff08;Generative AI&#xff09;突然成…

VMware如何导出和导入镜像OVF虚拟机(以unbuntu为例)

前言&#xff1a;我下载了一个unbuntu的系统镜像&#xff0c;基于这个镜像创建了一个unbuntu的虚拟机&#xff0c;辛辛苦苦配置需要的开发环境&#xff0c;如&#xff1a;安装了mysql&#xff0c;安装了jdk等&#xff0c;此时&#xff0c;我的同事可能需要也是同一套类似环境&a…

MySQL 中的锁(二)

8.4. 意向锁 但是在上面的例子这里头有两个问题&#xff1a; 如果我们想对大楼整体上 S 锁&#xff0c;首先需要确保大楼中的没有正在维修的楼层&#xff0c;如果有正在维修的楼层&#xff0c;需要等到维修结束才可以对大楼整体上 S 锁。 如果我们想对大楼整体上 X 锁&#xf…

Vue+Three.js,三维3d模型 虚拟人 glb gltf

准备 我们需要建立一个vue项目,这里我直接用vue-cli脚手架了。 Part 1:引入three.js 项目文件夹里打开终端窗口,并运行: npm install --save three在需要使用three.js的组件内引入 import * as THREE from threePart 2:创建容器 创建canvas标签,为3D渲染建立容器。…

[go 面试] 深入理解进程、线程和协程的概念及区别

关注公众号【爱发白日梦的后端】分享技术干货、读书笔记、开源项目、实战经验、高效开发工具等,您的关注将是我的更新动力! 在操作系统中,我们经常听到进程、线程和协程这些概念,它们都是用来描述执行单元的。接下来,我会详细解释这些概念以及它们之间的区别。 1. 进程(…

拼多多第三季度收入激增315%,远超阿里巴巴

来源&#xff1a;猛兽财经 作者&#xff1a;猛兽财经 猛兽财经获悉&#xff0c;拼多多(PDD)第三季度的收入增长了94%&#xff0c;远远超过了阿里巴巴(BABA)同期9%的增速。 据LSEG的数据&#xff0c;拼多多表示&#xff0c;其第三季度的收入为94.4亿美元&#xff0c;交易收入增…

现代C++之万能引用、完美转发、引用折叠

现代C之万能引用、完美转发、引用折叠 0.导语1.问题引入2.引入万能引用3.万能引用出现场合4.理解左值与右值4.1 精简版4.2 完整版4.3 生命周期延长4.4 生命周期延长应用5.区分万能引用6.表达式的左右值性与类型无关7.引用折叠和完美转发7.1 引用折叠之本质细节7.2 示例与使用7.…

零基础学Python的第四天||字符串(1)

字符串(1) 如果对自然语言分类&#xff0c;有很多中分法&#xff0c;比如英语、法语、汉语等&#xff0c;这种分法是最常见的。在语言学里面&#xff0c;也有对语言的分类方法&#xff0c;比如什么什么语系之类的。我这里提出一种分法&#xff0c;这种分法尚未得到广大人民群众…

linux 讨论题合集(个人复习)

常规文件的权限是什么&#xff1f;如何分配或修改这些权限&#xff1f;文件夹&#xff08;目录&#xff09;的权限是什么&#xff1f;显示常规文件和文件夹的区别 讨论&#xff1a;①常规的文件权限有四种&#xff0c;r可读、w可写、x可执行、-没有权限&#xff1b;②可以使用c…

oracle常用通用sql脚本——查询前用户的表空间信息

oracle常用通用sql脚本——查询前用户的表空间信息 一、查询前用户的表空间信息1、 查询当前用户的所有表空间2、 已G为单位3、 已MB为单位 二、以上俩段sql查出结果集存在差异的原因 一、查询前用户的表空间信息 1、 查询当前用户的所有表空间 SELECT * FROM dba_tablespace…

鸿蒙4.0开发笔记之ArkTS装饰器语法基础@Extend扩展组件样式与stateStyles多态样式(十一)

一、Extend扩展组件样式 1、作用 前文提到可以使用Styles用于样式的扩展&#xff0c;在Styles的基础上&#xff0c;ArkTS语法还提供了Extend&#xff0c;⽤于扩展原生组件样式&#xff0c;包括Text、Button等等。 2、定义语法 Extend(UIComponentName) function functionNam…

如何优化 Elasticsearch 查询性能

优化 Elasticsearch 查询性能需要从多个方面入手。通过合理的索引设计、优化查询语句、优化硬件资源和集群架构等方面的优化&#xff0c;可以显著提高 Elasticsearch 的查询性能。 1.索引设计优化 良好的索引设计是优化 Elasticsearch 查询性能的关键。可以通过以下几个方面来…

错误 LNK2001 无法解析的外部符号 __imp__CrtDbgReport

”属性“ -->”设置“ --> ”c“ – > ”代码生成“ --> ”运行库“ &#xff0c;将 ”多线程(MT)“ 改为 ”多线程(MTD)“。