当前位置: 首页 > news >正文

JavaWeb——Vue组件库Element(4/6):案例:基本页面布局(基本框架、页面布局、CSS样式、完善布局、效果展示,含完整代码)

目录

步骤

基本页面布局

基本框架

页面布局

CSS样式

完善布局

效果展示

完整代码 


Element 的基本使用方式以及常见的组件已经了解完了,接下来要完成一个案例,通过这个案例让大家知道如何基于 Element 中的各个组件制作一个完整的页面。

案例:根据页面原型完成员工管理页面开发,并通过Axios完成数据异步加载。

页面列表中的数据不是写死的,而是要基于 Axios 发送请求动态加载展示的,提供了服务端数据获取的地址,即 YAPI Pro平台提供的 MOCK 地址,访问后返回 JSON 格式的数据,需要将其渲染展示在列表页面中,最终制作出来的页面分为三个部分,上面是页头部分,下面分为左侧菜单栏和右侧主展示区域。 

MOCK地址:https://yapi.pro/mock/401965/user/getById

该地址来源于互联网,如有侵权请联系删除。

制作页面的思路是从全局到细节推进,具体操作步骤如下:

步骤

  • 创建页面,完成页面的整体布局规划
  • 布局中各个部分的组件实现
  • 列表数据的异步加载,并渲染展示

基本页面布局

接下来着手开发页面,先创建一个页面并完成整体布局规划。

基本框架

打开 VS Code,在“View”目录下创建“tlias”目录,在该目录下创建“EmpView.vue”组件,组件包含“templates”(定义 HTML 页面模板,先定义根标签 div)、“script”(定义 view 中的数据模型和方法,即编写 JS 文件)、“style”(定义 CSS 样式代码)。

完成基本框架:

创建好组件后,在浏览器中访问,由于在 main.js 入口文件中引用的是之前的组件,现在要开发新的员工管理组件,所以在App.vue组件中将之前的引用注释掉

定义新的“emp-view”标签,访问项目时即为“emp-view”组件,但此时组件内无内容。 

页面布局

接下来编写页面布局,页面布局分为三个部分,可使用 Element 提供的布局组件,其中有“el_container”(外层容器)、“el_header”(顶栏容器)、“el_aside”(侧边栏容器)、“el_main”(主要区域容器)、“el_footer”(底栏容器)。

找到所需页面布局,点击显示代码将布局拷贝过来粘贴在 div 区域,由于未加样式和组件,页面无效果。

CSS样式

接着加入 CSS 样式,在外层布局容器“el_container”中通过 style 设置样式,指定容器高度和边框,将设置高度为 700,将顶栏替换为项目标题“tlias智能学习辅助系统”,设置字体大小为 40 像素,再设置顶栏背景颜色。(都可在官网参考)

完善布局

准备好顶栏结构后,准备侧边栏菜单,参照实例将菜单复制到“el_aside”区域,只保留需要的“选项一”和“选项二”,并修改菜单名字为“系统信息管理”、“部门管理”、“员工管理”。

然后制作右侧主展示区域,参考 Element 官网实例将表格内容复制到“el_main”区域,调整表格列名,

将资料中准备好的表格列内容复制过来,在表格渲染时要展示“data”数据模型,定义一个数组“tableData”。

效果展示

最后打开浏览器确认,页面最上面是页头部分,左侧是菜单,右侧是表格,基本网页布局完成。

完整代码 

EmpView.vue

<template><div><el-container style="height: 700px; border: 1px solid #eee"><el-header style="font-size: 40px; background-color: rgb(238, 241, 246)">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tlias 智能学习辅助系统</el-header><el-container><el-aside width="200px"><el-menu :default-openeds="['1', '3']"><el-submenu index="1" style="background-color: rgb(215, 215, 215)"><template slot="title"><i class="el-icon-message"></i>系统信息管理 &nbsp;&nbsp; >></template><el-menu-item index="1-1">部门管理</el-menu-item><el-menu-item index="1-2">员工管理</el-menu-item></el-submenu></el-menu></el-aside><el-main><!-- 表单 --><el-form :inline="true" :model="searchForm" class="demo-form-inline"><el-form-item label="姓名"><el-input v-model="searchForm.name" placeholder="姓名"></el-input></el-form-item><el-form-item label="性别"><el-select v-model="searchForm.gender" placeholder="性别"><el-option label="男" value="1"></el-option><el-option label="女" value="2"></el-option></el-select></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">查询</el-button></el-form-item></el-form><!-- 表格 --><el-table :data="tableData"><el-table-column prop="name" label="姓名" width="180"></el-table-column><el-table-column prop="image" label="图像" width="180"></el-table-column><el-table-column prop="gender" label="性别" width="140"></el-table-column><el-table-column prop="job" label="职位" width="140"></el-table-column><el-table-column prop="entryDate" label="入职日期" width="180"></el-table-column><el-table-column prop="updateTime" label="最后操作时间" width="230"></el-table-column><el-table-column label="操作"><el-button type="primary" size="mini">编辑</el-button><el-button type="danger" size="mini">删除</el-button></el-table-column></el-table></el-main></el-container></el-container></div>
</template><script>
export default {data() {return {tableData:[],};},
};
</script><style> </style>


END


学习自:黑马程序员——JavaWeb课程

相关文章:

JavaWeb——Vue组件库Element(4/6):案例:基本页面布局(基本框架、页面布局、CSS样式、完善布局、效果展示,含完整代码)

目录 步骤 基本页面布局 基本框架 页面布局 CSS样式 完善布局 效果展示 完整代码 Element 的基本使用方式以及常见的组件已经了解完了&#xff0c;接下来要完成一个案例&#xff0c;通过这个案例让大家知道如何基于 Element 中的各个组件制作一个完整的页面。 案例&am…...

【c++】 模板初阶

泛型编程 写一个交换函数&#xff0c;在学习模板之前&#xff0c;为了匹配不同的参数类型&#xff0c;我们可以利用函数重载来实现。 void Swap(int& a, int& b) {int c a;a b;b c; } void Swap(char& a, char& b) {char c a;a b;b c; } void Swap(dou…...

R 语言 data.table 大规模数据处理利器

前言 最近从一个 python 下的 anndata 中提取一个特殊处理过的单细胞矩阵&#xff0c;想读入R用来画图&#xff08;个人比较喜欢用R可视化 &#xff09;&#xff0c;保存之后&#xff0c;大概几个G的CSV文件&#xff0c;如果常规方法读入R&#xff0c;花费的时间比较久&#x…...

Java 静态代理详解:为什么代理类和被代理类要实现同一个接口?

在 Java 开发中&#xff0c;代理模式是一种常用的设计模式&#xff0c;其中代理类的作用是控制对其他对象的访问。代理模式分为静态代理和动态代理&#xff0c;在静态代理中&#xff0c;代理类和被代理类都需要实现同一个接口。这一机制为实现透明的代理行为提供了基础&#xf…...

OpenCV C++霍夫圆查找

OpenCV 中的霍夫圆检测基于 霍夫变换 (Hough Transform)&#xff0c;它是一种从边缘图像中识别几何形状的算法。霍夫圆检测是专门用于检测图像中的圆形形状的。它通过将图像中的每个像素映射到可能的圆参数空间&#xff0c;来确定哪些像素符合圆形状。 1. 霍夫变换的原理 霍夫…...

H.264编解码介绍

一、简介 H.264,又称为AVC(Advanced Video Coding),是一种广泛使用的视频压缩标准。它由国际电信联盟(ITU)和国际标准化组织(ISO)联合开发,并于2003年发布。 H.264的发展历史可以追溯到上个世纪90年代。当时,视频压缩技术的主要标准是MPEG-2,但它在压缩率和视频质…...

Java | Leetcode Java题解之第450题删除二叉搜索树中的节点

题目&#xff1a; 题解&#xff1a; class Solution {public TreeNode deleteNode(TreeNode root, int key) {TreeNode cur root, curParent null;while (cur ! null && cur.val ! key) {curParent cur;if (cur.val > key) {cur cur.left;} else {cur cur.rig…...

【CViT】Deepfake Video Detection Using Convolutional Vision Transformer

文章目录 Deepfake Video Detection Using Convolutional Vision Transformerkey points**卷积视觉变压器**FLViT实验总结Deepfake Video Detection Using Convolutional Vision Transformer 会议/期刊:2021 作者: key points 提出了一种用于检测深度伪造的卷积视觉变压器…...

安卓主板_MTK4G/5G音视频记录仪整机及方案定制

音视频记录仪方案&#xff0c;采用联发科MT6877平台八核2* A78 6* A55主频高达2.4GHz, 具有高能低耗特性&#xff0c;搭载Android 12.0智能操作系统&#xff0c;可选4GB32GB/6GB128GB内存&#xff0c;运行流畅。主板集成NFC、双摄像头、防抖以及多种无线数据连接&#xff0c;支…...

Qt 教程全集目录公布(方便查阅)

点击上方"蓝字"关注我们 Qt 安装 以下是常见安装方法和软件获取 Qt4Qt5Qt6版本下载(在线和离线)【网址】...

云计算SLA响应时间的matlab模拟与仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.本算法原理 5.完整程序 1.程序功能描述 用matlab模拟&#xff0c;一个排队理论。输入一堆包&#xff0c;经过buffer&#xff08;一个或者几个都行&#xff09;传给server&#xff0c;这些包会在buffer里…...

ARTS Week 42

Algorithm 本周的算法题为 2283. 判断一个数的数字计数是否等于数位的值 给你一个下标从 0 开始长度为 n 的字符串 num &#xff0c;它只包含数字。 如果对于 每个 0 < i < n 的下标 i &#xff0c;都满足数位 i 在 num 中出现了 num[i]次&#xff0c;那么请你返回 true …...

10.2学习

1.IOC控制反转 IoC&#xff08;Inverse of Control:控制反转&#xff09;是⼀种设计思想&#xff0c;就是将原本在程序中⼿动创建对象的控制权&#xff0c;交由Spring框架来管理。 IoC 在其他语⾔中也有应⽤&#xff0c;并⾮ Spring 特有。 ​ IoC 容器是 Spring⽤来实现 IoC …...

【数一线性代数】021入门

Index 推荐阅读&#xff1a;https://blog.csdn.net/weixin_60702024/article/details/141729949分析实现总结 推荐阅读&#xff1a;https://blog.csdn.net/weixin_60702024/article/details/141729949 给定二叉树的根节点root&#xff0c;计算其叶节点的个数。 分析实现 类似…...

(k8s)kubernetes中ConfigMap和Secret

转载&#xff1a;ConfigMap 一、ConfigMap介绍 ConfigMap是一种API对象&#xff0c;用来将非机密性的数据保存到键值对中。使用时&#xff0c;Pod可以将其用作环境变量、命令行参数或存储卷中的配置文件。 ConfigMap将你的环境配置信息和容器镜像解耦&#xff0c;便于应用配置…...

stm32四足机器人(标准库)

项目技术要求 PWM波形的学习 参考文章stm32 TIM输出比较(PWM驱动LED呼吸灯&&PWM驱动舵机&&PWM驱动直流电机)_ttl pwm 驱动激光头区别-CSDN博客 舵机的学习 参考文章 stm32 TIM输出比较(PWM驱动LED呼吸灯&&PWM驱动舵机&&PWM驱动直流电机)…...

基于Hive和Hadoop的共享单车分析系统

本项目是一个基于大数据技术的共享单车分析系统&#xff0c;旨在为用户提供全面的单车使用信息和深入的出行行为分析。系统采用 Hadoop 平台进行大规模数据存储和处理&#xff0c;利用 MapReduce 进行数据分析和处理&#xff0c;通过 Sqoop 实现数据的导入导出&#xff0c;以 S…...

基于SSM和vue的机票订购管理系统

&#x1f449;文末查看项目功能视频演示获取源码sql脚本视频导入教程视频 1 、功能描述 基于SSM和vue的机票订购管理系统2拥有两种角色 管理员&#xff1a;用户管理、机票管理、订票管理、公告管理、广告管理、系统管理、添加机票等 用户&#xff1a;登录注册、订票、查看公…...

【rCore OS 开源操作系统】Rust 练习题题解: Enums

【rCore OS 开源操作系统】Rust 练习题题解: Enums 摘要 rCore OS 开源操作系统训练营学习中的代码练习部分。 在此记录下自己学习过程中的产物&#xff0c;以便于日后更有“收获感”。 后续还会继续完成其他章节的练习题题解。 正文 enums1 题目 // enums1.rs // // No hi…...

VPN简述

文章目录 VPNVPN基础VPN类型 VPN VPN隧道安全 VPN基础 背景&#xff1a; 在网络传输中&#xff0c;绝大部分数据内容都是明文传输&#xff0c;存在很多安全隐患&#xff08;窃听、篡改、冒充&#xff09; 总部、分公司、办事处、出差人员、合作单位等需要访问总部网络资源 Vi…...

linux之kylin系统nginx的安装

一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源&#xff08;HTML/CSS/图片等&#xff09;&#xff0c;响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址&#xff0c;提高安全性 3.负载均衡服务器 支持多种策略分发流量…...

从零实现富文本编辑器#5-编辑器选区模型的状态结构表达

先前我们总结了浏览器选区模型的交互策略&#xff0c;并且实现了基本的选区操作&#xff0c;还调研了自绘选区的实现。那么相对的&#xff0c;我们还需要设计编辑器的选区表达&#xff0c;也可以称为模型选区。编辑器中应用变更时的操作范围&#xff0c;就是以模型选区为基准来…...

UDP(Echoserver)

网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法&#xff1a;netstat [选项] 功能&#xff1a;查看网络状态 常用选项&#xff1a; n 拒绝显示别名&#…...

汇编常见指令

汇编常见指令 一、数据传送指令 指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX&#xff08;不访问内存&#xff09;XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...

JVM暂停(Stop-The-World,STW)的原因分类及对应排查方案

JVM暂停(Stop-The-World,STW)的完整原因分类及对应排查方案,结合JVM运行机制和常见故障场景整理而成: 一、GC相关暂停​​ 1. ​​安全点(Safepoint)阻塞​​ ​​现象​​:JVM暂停但无GC日志,日志显示No GCs detected。​​原因​​:JVM等待所有线程进入安全点(如…...

Springboot社区养老保险系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;社区养老保险系统小程序被用户普遍使用&#xff0c;为方…...

听写流程自动化实践,轻量级教育辅助

随着智能教育工具的发展&#xff0c;越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式&#xff0c;也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建&#xff0c;…...

用机器学习破解新能源领域的“弃风”难题

音乐发烧友深有体会&#xff0c;玩音乐的本质就是玩电网。火电声音偏暖&#xff0c;水电偏冷&#xff0c;风电偏空旷。至于太阳能发的电&#xff0c;则略显朦胧和单薄。 不知你是否有感觉&#xff0c;近两年家里的音响声音越来越冷&#xff0c;听起来越来越单薄&#xff1f; —…...

Fabric V2.5 通用溯源系统——增加图片上传与下载功能

fabric-trace项目在发布一年后,部署量已突破1000次,为支持更多场景,现新增支持图片信息上链,本文对图片上传、下载功能代码进行梳理,包含智能合约、后端、前端部分。 一、智能合约修改 为了增加图片信息上链溯源,需要对底层数据结构进行修改,在此对智能合约中的农产品数…...

处理vxe-table 表尾数据是单独一个接口,表格tableData数据更新后,需要点击两下,表尾才是正确的

修改bug思路&#xff1a; 分别把 tabledata 和 表尾相关数据 console.log() 发现 更新数据先后顺序不对 settimeout延迟查询表格接口 ——测试可行 升级↑&#xff1a;async await 等接口返回后再开始下一个接口查询 ________________________________________________________…...