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>

在这里插入图片描述

  1. 增加搜索框
<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>

在这里插入图片描述

最终效果

在这里插入图片描述

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

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

相关文章

SystemVerilog构造、包

包 包提供了一种共享不同构造的附加方式。他们的行为与VHDL包。包可以包含函数、任务、类型和枚举。的语法包是&#xff1a; package package_name; items endpackage : package_name 最终的package_name不是必需的&#xff0c;但它使代码更易于阅读。包是import命令在其他…

「Mybatis深入四」:插入数据后返回主键

一、需求 向数据库插入一条记录后&#xff0c;希望能立即拿到这条记录在数据库中的主键值。 二、代码演示 1、方式1 - useGeneratedKeys 数据库环境 CREATE DATABASE mybatis_db; USE mybatis_db; CREATE TABLE user (id INT(11) NOT NULL AUTO_INCREMENT,username VARCHAR(…

2024.3.7

大端存储&#xff1a;高存低&#xff0c;低存高&#xff1b; 小端存储&#xff1a;高存高&#xff0c;低存低&#xff1b; sizeof 用于获取数据类型或变量的大小&#xff0c;strlen 用于获取字符串的长度。 不能改变常量字符串&#xff0c; char *arr"hello"; *ar…

路径解析(ccf 201604-3)解题思路

问题描述   在操作系统中&#xff0c;数据通常以文件的形式存储在文件系统中。文件系统一般采用层次化的组织形式&#xff0c;由目录&#xff08;或者文件夹&#xff09;和文件构成&#xff0c;形成一棵树的形状。文件有内容&#xff0c;用于存储数据。目录是容器&#xff0c…

【海贼王的数据航海:利用数据结构成为数据海洋的霸主】栈和队列

目录 1 -> 栈 1.1 -> 栈的概念及结构 1.2 -> 栈的实现 1.2.1 -> Stack.h 1.2.2 -> Stack.c 1.2.3 -> Test.c 2 -> 队列 2.1 -> 队列的概念及结构 2.2 -> 队列的实现 2.2.1 -> Queue.h 2.2.2 -> Queue.c 1 -> 栈 1.1 -> 栈的…

设计模式:六大原则 ③

一、六大设计原则 &#x1f360; 开闭原则 (Open Close Principle) &#x1f48c; 对扩展开放&#xff0c;对修改关闭。在程序需要进行拓展的时候&#xff0c;不能去修改原有的代码&#xff0c;实现一个热插拔的效果。简言之&#xff0c;是为了使程序的扩展性好&#xff0c;易…

Keepalived实验

一、 LVSKeepalived 实验&#xff1a;7-1为主&#xff1b; 7-2为备&#xff1b; 7-3和7-4为后端服务器 1.关闭防火墙和selinux [rootlocalhost ~]# systemctl stop firewalld [rootlocalhost ~]# setenforce 02.配置主设备7-1 1.安装ipvsadm和keepalived [rootlocalhost ~]#…

色彩表示空间:RGB、HIS、YUV、YIQ

一、RGB颜色空间 含义&#xff1a; RGB颜色空间使用相加混合法&#xff0c;将三个彩色分量按不同比例叠加&#xff0c;从而在屏幕上呈现出各种颜色。三个分量分别代表红色&#xff08;R&#xff09;、绿色&#xff08;G&#xff09;和蓝色&#xff08;B&#xff09;。 转换计…

接口测试,后端接口还没开发完,如何测?解决看这一篇就够了......

前言 在测试的时候经常会碰到后端开发工程师的接口还没有开发完成&#xff0c;但是测试任务已经分配过来。没有接口怎么测试呢&#xff1f; 测试人员可以通过 mock server 自己去造一个接口来访问。mock server 可用于模拟真实的接口。收到请求时&#xff0c;它会根据配置返回…

2022年浙江省职业院校技能大赛信息安全管理与评估 理论题一阶段

培训、环境、资料 公众号&#xff1a;Geek极安云科 网络安全群&#xff1a;775454947极安云科专注于技能提升&#xff0c;赋能 2024年广东省高校的技能提升&#xff0c;在培训中我们的应急响应环境 成功押题成功&#xff0c;知识点、考点、内容完美还原大赛赛题环境&#xff0c…

嵌入式学习34-网络通信2 bind

1.recvfrom ssize_t recvfrom(int sockfd, void *buf, size_t len, int flags, struct sockaddr *src_addr, socklen_t *addrlen); 功能: 从套接字中 接收数据 参数: sockfd: …

如何选择阅读软件技术学习书籍

如何选择阅读软件技术学习书籍 这里以软件技术学习的角度结合自身感悟谈谈&#xff0c;如何选择阅读书籍。 人的时间和精力都是非常有限的&#xff0c;软件技术学习者如何选择阅读书籍。以下是从我的经验教训总结的一些体会&#xff1a; 1、确定自己的兴趣领域和阅读目标 选…

blast原理与使用技巧,最全最详细

BLAST 序列比对 在生物信息学领域&#xff0c;序列比对是一项基础而关键的任务。它帮助研究人员识别基因、理解蛋白质功能&#xff0c;并揭示物种之间的进化关系。 本文旨在介绍BLAST&#xff08;Basic Local Alignment Search Tool&#xff09;的原理及其不同变体&#xff0c;…

SD-WAN专线对本地网络有哪些要求?

SD-WAN&#xff08;软件定义广域网&#xff09;是一种新型的网络架构&#xff0c;通过软件定义的方式&#xff0c;将网络控制平面和数据转发平面进行分离&#xff0c;从而实现网络的灵活性、可编程性和自动化管理。在部署SD-WAN专线时&#xff0c;本地网络需要满足一些要求&…

sass 重写elementui样式

$namespace: promotion 这段代码中的 forward 指令用于将 element-plus/theme-chalk/src/mixins/config.scss 文件中的内容导入当前的 Sass 文件&#xff0c;并使用命名空间 promotion。这样做的目的是可以在当前文件中使用被导入文件中的 mixin&#xff0c;而不会与当前文件中…

面试题,手动取消监听

vue2中&#xff0c;watch如何在监听一次后&#xff0c;就销毁 在 Vue.js 中&#xff0c;watch 监听器无法直接在监听一次之后自动销毁。然而&#xff0c;你可以通过在监听器内部手动注销&#xff08;取消&#xff09;监听来达到类似的效果。Vue 提供了 vm.$watch 方法来创建一…

【Amazon策略权限】开启costexplorer、成本优化中心等权限功能设置,以及委派给成员账号组织的只读权限操作步骤

文章目录 一、问题需求二、操作流程1. 开启成本优化中心2. 成本管理首选项中开启关联账户访问3.为子用户设置OU只读权限4.为子用户设置CE&#xff08;Cost Explorer&#xff09;只读权限5. 为在组织中的成员用户创建委派策略&#xff0c;开启OU只读权限 三、参考资料 一、问题需…

MT4移动止损策略:灵活应对市场波动

在外汇交易中&#xff0c;移动止损策略是一种重要的风险管理工具&#xff0c;能够帮助交易者在市场波动时保护利润和控制风险。特别是在MT4平台上&#xff0c;这一策略的应用更加便捷和灵活。本文将深入探讨MT4移动止损策略的定义、应用方法、优势和注意事项&#xff0c;帮助读…

JavaSE(上)-Day1

JavaSE&#xff08;上&#xff09;-Day1 CMD终端的常见命令配置环境变量的作用?高级记事本安装&#xff08;略&#xff0c;正版收费&#xff09;各个语言的运行方式区别为什么Java可以实现跨平台?JDK和JRE的认识JDK是什么&#xff1f;由什么组成JRE是什么&#xff1f;由什么组…

通义灵码-智能编码辅助工具

1.介绍 通义灵码&#xff0c;是阿里云出品的一款基于通义大模型的智能编码辅助工具&#xff0c;提供行级/函数级实时续写、自然语言生成代码、单元测试生成、代码注释生成、代码解释、研发智能问答、异常报错排查等能力&#xff0c;并针对阿里云 SDK/OpenAPI 的使用场景调优&a…