Vue快速开发一个主页
前言
这里讲述我们如何快速利用Vue脚手架快速搭建一个主页。
页面布局
el-container / el-header / el-aside / el-main:https://element.eleme.cn/#/zh-CN/component/container
<el-container><el-header style="background-color: #4c535a"></el-header>
</el-container><el-container><el-aside style="overflow: hidden; min-height: 100vh; background-color: #545c64; width: 250px"></el-aside><el-main></el-main>
</el-container>

顶部栏 header
<el-header style="background-color: #687179"><img src="@/assets/logo.png" alt="" style="width: 40px; position: relative; top: 10px;"><span style="font-size: 20px; margin-left: 15px; color: white">第一个项目管理</span></el-header>

侧边栏 aside
<el-menu default-active="1" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"><el-menu-item index="1"><i class="el-icon-s-home"></i><span slot="title">系统首页</span></el-menu-item><el-submenu index="2"><template slot="title"><i class="el-icon-location"></i><span>用户管理</span></template><el-menu-item-group><el-menu-item index="2-1">管理员信息</el-menu-item><el-menu-item index="2-2">用户信息</el-menu-item></el-menu-item-group></el-submenu><el-submenu index="3"><template slot="title"><i class="el-icon-location"></i><span>信息管理</span></template><el-menu-item-group><el-menu-item index="3-1">xxx信息</el-menu-item><el-menu-item index="3-2">yyy信息</el-menu-item></el-menu-item-group></el-submenu>
</el-menu>

主体结构
把它加入到主体结构中

然后再HomeView中写入这个东西

将菜单切换修改成路由的方式
1.在 el-menu 标签里绑定 default-active 为路由的形式
:default-active="$route.path" router

2.然后将 标签里的index属性值设置成对应的路由即可

3.在 index.js 里添加对应路由配置,路由和具体的组件相对应:

4.创建对应的组件(AdminView.vue),编写组件页面对应的代码即可
<template><div><template><el-table:data="tableData"style="width: 100%":row-class-name="tableRowClassName"><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column></el-table></template></div>
</template>
<script>
export default {methods: {tableRowClassName({row, rowIndex}) {if (rowIndex === 1) {return 'warning-row';} else if (rowIndex === 3) {return 'success-row';}return '';}},data() {return {tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄',}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄',}, {date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}]}}
}
</script>

5. 按钮操作
<div><el-table :data="tableData" style="width: 100%; margin: 15px 0px"><el-table-column prop="date" label="日期" width="180"></el-table-column><el-table-column prop="name" label="姓名" width="180"></el-table-column><el-table-column prop="address" label="地址"></el-table-column><el-table-column label="操作"><el-button type="primary">编辑</el-button><el-button type="danger">删除</el-button></el-table-column></el-table>
</div>

- 增加搜索框
<div><el-input style="width: 200px; margin-right: 10px" placeholder="请输入内容"></el-input><el-button type="warning">搜索</el-button><el-button type="primary">新增</el-button>
</div>

8.表格数据分页
<div class="block"><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="currentPage4":page-sizes="[10, 20, 30, 40]":page-size="10"layout="total, sizes, prev, pager, next, jumper":total="400"></el-pagination></div>

最终效果

相关文章:
Vue快速开发一个主页
前言 这里讲述我们如何快速利用Vue脚手架快速搭建一个主页。 页面布局 el-container / el-header / el-aside / el-main:https://element.eleme.cn/#/zh-CN/component/container <el-container><el-header style"background-color: #4c535a"…...
Java SE入门及基础(33)
final 修饰符 1. 应用范围 final 修饰符应该使用在类、变量以及方法上 2. final 修饰类 Note that you can also declare an entire class final. A class that is declared final cannot be subclassed. This is particularly useful, for example, when creating an imm…...
ChatGPT逐步进入留学圈但并不能解决留学规划的问题
2022 年底,一个能像人类一样对话的AI软件ChatGPT,在5天内突破一百万用户,风靡全球,如今用户已达1.8亿。 四个月后,ChatGPT进化为GPT4版本。该版本逻辑、数学推理能力卓越。拿留美标准化考试举例,GPT4能够在…...
WebGL之灯光使用解析
在使用灯光之前,首先我们需要了解,与定义更广泛的 OpenGL 不同,WebGL 并没有继承 OpenGL 中灯光的支持。所以你只能由自己完全得控制灯光。幸运得是,这也并不是很难,本文接下来就会介绍完成灯光的基础。 在 3D 空间中…...
【Spring云原生系列】SpringBoot+Spring Cloud Stream:消息驱动架构(MDA)解析,实现异步处理与解耦合
🎉🎉欢迎光临,终于等到你啦🎉🎉 🏅我是苏泽,一位对技术充满热情的探索者和分享者。🚀🚀 🌟持续更新的专栏《Spring 狂野之旅:从入门到入魔》 &a…...
PostgreSQL索引篇 | TSearch2 全文搜索
PostgreSQL版本为8.4.1 (本文为《PostgreSQL数据库内核分析》一书的总结笔记,需要电子版的可私信我) 索引篇: PostgreSQL索引篇 | BTreePostgreSQL索引篇 | GiST索引PostgreSQL索引篇 | Hash索引PostgreSQL索引篇 | GIN索引 (倒排…...
SpringMVC 中的常用注解和用法
⭐ 作者:小胡_不糊涂 🌱 作者主页:小胡_不糊涂的个人主页 📀 收录专栏:JavaEE 💖 持续更文,关注博主少走弯路,谢谢大家支持 💖 注解 1. MVC定义2. 注解2.1 RequestMappin…...
智慧城市中的数据力量:大数据与AI的应用
目录 一、引言 二、大数据与AI技术的融合 三、大数据与AI在智慧城市中的应用 1、智慧交通 2、智慧环保 3、智慧公共安全 4、智慧公共服务 四、大数据与AI在智慧城市中的价值 1、提高城市管理的效率和水平 2、优化城市资源的配置和利用 3、提升市民的生活质量和幸福感…...
德人合科技|天锐绿盾加密软件——数据防泄漏系统
德人合科技是一家专注于提供企业级信息安全解决方案的服务商,提供的天锐绿盾加密软件是一款专为企业设计的数据安全防护产品,主要用于解决企事业单位内部敏感数据的防泄密问题。 www.drhchina.com PC端: https://isite.baidu.com/site/wjz012…...
C语言---单身狗问题
1.单身狗初阶 这个题目就是数组里面有一串数字,都是成对存在的,只有一个数字只出现了一次,请你找出来 (1)异或是满足交换律的,两个相同的数字异或之后是0; (2)让0和每个…...
一次gitlab 502故障解决过程
通过top,发现prometheus进程占用CPU接近100%,这肯定有点异常。gitlab-ctl tail prometheus 发现有报错的情况,提示空间不足。暂时不管空间的问题。 2024-03-07_05:48:09.01515 ts2024-03-07T05:48:09.014Z callermain.go:1116 levelerror err"open…...
Xilinx 7系列 FPGA硬件知识系列(一)——FPGA选型参考
目录 1.1 Xilinx-7系列产品的工艺级别 编辑1.2 Xilinx-7系列产品的特点 1.2.1 Spartan-7系列 1.2.2 Artix-7系列 1.2.3 Kintex-7系列 1.2.4 Virtex-7系列 1.3 Xilinx-7系列FPGA对比 1.3.1 DSP资源柱状图 1.3.2 Block RAM资源柱状图 1.3.3 高速串行收…...
【C++从练气到飞升】02---初识类与对象
🎈个人主页:库库的里昂 ✨收录专栏:C从练气到飞升 🎉鸟欲高飞先振翅,人求上进先读书。 目录 ⛳️推荐 一、面向过程和面向对象初步认识 二、类的引用 1. C语言版 2. C版 三、类的定义 类的两种定义方式ÿ…...
探秘分布式神器RMI:原理、应用与前景分析(一)
本系列文章简介: 本系列文章将深入探究RMI远程调用的原理、应用及未来的发展趋势。首先,我们会详细介绍RMI的工作原理和基本流程,解析其在分布式系统中的核心技术。随后,我们将探讨RMI在各个领域的应用,包括分布式计算…...
JVM(Java虚拟机)概述
1. JVM的定义和作用 JVM(Java Virtual Machine)是一个能够运行Java字节码的虚拟计算机。它是Java平台的核心组成部分,负责执行编译后的Java程序,提供跨平台运行的能力。JVM使得Java程序可以在任何安装了JVM的操作系统上运行&#…...
C#,数值计算,用割线法(Secant Method)求方程根的算法与源代码
1 割线法 割线法用于求方程 f(x) 0 的根。它是从根的两个不同估计 x1 和 x2 开始的。这是一个迭代过程,包括对根的线性插值。如果两个中间值之间的差值小于收敛因子,则迭代停止。 亦称弦截法,又称线性插值法.一种迭代法.指用割线近似曲线求…...
HTML静态网页成品作业(HTML+CSS)——花主题介绍网页设计制作(1个页面)
🎉不定期分享源码,关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍 🏷️本套采用HTMLCSS,未使用Javacsript代码,共有1个页面。 二、作品演示 三、代…...
Keepalive 解决nginx 的高可用问题
一 说明 keepalived利用 VRRP Script 技术,可以调用外部的辅助脚本进行资源监控,并根据监控的结果实现优先动态调整,从而实现其它应用的高可用性功能 参考配置文件: /usr/share/doc/keepalived/keepalived.conf.vrrp.localche…...
DPN网络
DPN DPN(Dual Path Networks)是一种网络结构,它结合了DensNet和ResNetXt两种思想的优点。这种结构的目的是通过不同的路径来利用神经网络的不同特性,从而提高模型的效率和性能。 DenseNet 的特点是其稠密连接路径,使…...
循序渐进丨MogDB 数据库新特性之SQL PATCH绑定执行计划
1 SQL PATCH 熟悉 Oracle 的DBA都知道,生产系统出现性能问题时,往往是SQL走错了执行计划,紧急情况下,无法及时修改应用代码,DBA可以采用多种方式针对于某类SQL进行执行计划绑定,比如SQL Profile、SPM、SQL …...
浏览器访问 AWS ECS 上部署的 Docker 容器(监听 80 端口)
✅ 一、ECS 服务配置 Dockerfile 确保监听 80 端口 EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]或 EXPOSE 80 CMD ["python3", "-m", "http.server", "80"]任务定义(Task Definition&…...
IDEA运行Tomcat出现乱码问题解决汇总
最近正值期末周,有很多同学在写期末Java web作业时,运行tomcat出现乱码问题,经过多次解决与研究,我做了如下整理: 原因: IDEA本身编码与tomcat的编码与Windows编码不同导致,Windows 系统控制台…...
vscode(仍待补充)
写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用 侧边栏 vscode还能连接ssh? debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...
渲染学进阶内容——模型
最近在写模组的时候发现渲染器里面离不开模型的定义,在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容,其实不管是方块还是方块实体,都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器,用于动态创…...
相机从app启动流程
一、流程框架图 二、具体流程分析 1、得到cameralist和对应的静态信息 目录如下: 重点代码分析: 启动相机前,先要通过getCameraIdList获取camera的个数以及id,然后可以通过getCameraCharacteristics获取对应id camera的capabilities(静态信息)进行一些openCamera前的…...
精益数据分析(97/126):邮件营销与用户参与度的关键指标优化指南
精益数据分析(97/126):邮件营销与用户参与度的关键指标优化指南 在数字化营销时代,邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天,我们将深入解析邮件打开率、网站可用性、页面参与时…...
sipsak:SIP瑞士军刀!全参数详细教程!Kali Linux教程!
简介 sipsak 是一个面向会话初始协议 (SIP) 应用程序开发人员和管理员的小型命令行工具。它可以用于对 SIP 应用程序和设备进行一些简单的测试。 sipsak 是一款 SIP 压力和诊断实用程序。它通过 sip-uri 向服务器发送 SIP 请求,并检查收到的响应。它以以下模式之一…...
JavaScript基础-API 和 Web API
在学习JavaScript的过程中,理解API(应用程序接口)和Web API的概念及其应用是非常重要的。这些工具极大地扩展了JavaScript的功能,使得开发者能够创建出功能丰富、交互性强的Web应用程序。本文将深入探讨JavaScript中的API与Web AP…...
Java求职者面试指南:计算机基础与源码原理深度解析
Java求职者面试指南:计算机基础与源码原理深度解析 第一轮提问:基础概念问题 1. 请解释什么是进程和线程的区别? 面试官:进程是程序的一次执行过程,是系统进行资源分配和调度的基本单位;而线程是进程中的…...
Unity UGUI Button事件流程
场景结构 测试代码 public class TestBtn : MonoBehaviour {void Start(){var btn GetComponent<Button>();btn.onClick.AddListener(OnClick);}private void OnClick(){Debug.Log("666");}}当添加事件时 // 实例化一个ButtonClickedEvent的事件 [Formerl…...
