Element使用
Element(美化网页）
ElementUI的使用注意事项：
Element.ui的使用基于Vue环境，于是Element相关组件的使用必须放在Vue对象绑定的视图中去
ElementUI的JS库的引入必须放在vue.js库的后面
<!-- 引入样式 --><link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css"><!-- 引入 Vue,由于index.js依赖于Vue所以必须先导入Vue库 --><script src="../js/vue.js"></script><!-- 引入组件库 --><script src="../element-ui/lib/index.js"></script>
Element的布局：
基础布局：el-row
将一行最多分为24个列，可以是24的整数因子个为一个小块
<el-row><!-- 一行组多24列 --><el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col></el-row><el-row><el-col :span="12"><div class="grid-content bg-purple"></div></el-col><el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col></el-row>
容器布局：<el-container>
<el-container>：外层容器。
<el-header>：顶栏容器。
<el-aside>：侧边栏容器。
<el-main>：主要区域容器。
<el-footer>：底栏容器。
注意：
当子元素中包含 <el-header> 或 <el-footer> 时，(只要有一个header，footer)全部子元素会垂直上下排列，否则会水平左右排列。
<body><div id="div"><el-container><el-header>Header</el-header><el-container><el-aside width="200px">Aside</el-aside><el-container><el-main>Main</el-main><el-footer>Footer</el-footer></el-container></el-container></el-container></div>
</body>
<script>new Vue({el:"#div"});
</script>
表单组件：el-form
注意：
Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可
v-model用于绑定输入框的数据到Vue对象的数据模型中
<body><div id="div"><el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"><el-form-item label="活动名称" prop="name"><el-input v-model="ruleForm.name"></el-input></el-form-item><el-form-item label="活动区域" prop="region"><el-select v-model="ruleForm.region" placeholder="请选择活动区域"><el-option label="区域一" value="shanghai"></el-option><el-option label="区域二" value="beijing"></el-option></el-select></el-form-item><el-form-item label="活动时间" required><el-col :span="11"><el-form-item prop="date1"><el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker></el-form-item></el-col><el-col class="line" :span="2">-</el-col><el-col :span="11"><el-form-item prop="date2"><el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker></el-form-item></el-col></el-form-item><el-form-item label="即时配送" prop="delivery"><el-switch v-model="ruleForm.delivery"></el-switch></el-form-item><el-form-item label="活动性质" prop="type"><el-checkbox-group v-model="ruleForm.type"><el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox><el-checkbox label="地推活动" name="type"></el-checkbox><el-checkbox label="线下主题活动" name="type"></el-checkbox><el-checkbox label="单纯品牌曝光" name="type"></el-checkbox></el-checkbox-group></el-form-item><el-form-item label="特殊资源" prop="resource"><el-radio-group v-model="ruleForm.resource"><el-radio label="线上品牌商赞助"></el-radio><el-radio label="线下场地免费"></el-radio></el-radio-group></el-form-item><el-form-item label="活动形式" prop="desc"><el-input type="textarea" v-model="ruleForm.desc"></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button><el-button @click="resetForm('ruleForm')">重置</el-button></el-form-item></el-form></div>
</body>
<script>new Vue({el:"#div",data() {return {ruleForm: {name: '',region: '',date1: '',date2: '',delivery: false,type: [],resource: '',desc: ''},rules: {name: [{ required: true, message: '请输入活动名称', trigger: 'blur' },{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }],region: [{ required: true, message: '请选择活动区域', trigger: 'change' }],date1: [{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }],date2: [{ type: 'date', required: true, message: '请选择时间', trigger: 'change' }],type: [{ type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }],resource: [{ required: true, message: '请选择活动资源', trigger: 'change' }],desc: [{ required: true, message: '请填写活动形式', trigger: 'blur' }]}};},methods: {submitForm(formName) {this.$refs[formName].validate((valid) => {if (valid) {alert('submit!');} else {console.log('error submit!!');return false;}});},resetForm(formName) {this.$refs[formName].resetFields();}}});
</script>
其中在submit提交按钮的函数中绑定对应的异步操作
在校验结果通过或者失败的话执行对应的操作，用于通过axios添加相应的异步操作
methods: {submitForm(formName) {this.$refs[formName].validate((valid) => {if (valid) {alert('submit!');} else {console.log('error submit!!');return false;}});},
表格组件：
<body><div id="div"><!-- 当el-table元素中注入data对象数组后，在el-table-column中用prop属性来对应对象中的键名即可填入数据，用label属性来定义表格的列名。可以使用width属性来定义列宽。 --><template><!-- 通过:data将data属性绑定对应的数据模型 --><!-- style表示只占整个页面的一半 --><el-table:data="tableData"style="width: 50%"><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>
</body>
<script>new Vue({el:"#div",data() {return {// 在开发中这个数据模型一般是通过ajax请求从后台获取的默认为空数组tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄'}, {date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1516 弄'}]}}});
</script>
导航栏组件
<body><div id="div"><!-- 导航菜单默认为垂直模式，通过mode属性可以使导航菜单变更为水平模式。--horizontal另外，在菜单中通过submenu组件可以生成二级菜单。Menu 还提供了background-color、text-color和active-text-color点击标签的颜色，分别用于设置菜单的背景色、菜单的文字颜色和当前激活菜单的文字颜色。 --><el-menu:default-active="activeIndex2"class="el-menu-demo"mode="horizontal"@select="handleSelect"background-color="#545c64"text-color="#fff"active-text-color="#ffd04b"><el-menu-item index="1">处理中心</el-menu-item><el-submenu index="2"><template slot="title">我的工作台</template><el-menu-item index="2-1">选项1</el-menu-item><el-menu-item index="2-2">选项2</el-menu-item><el-menu-item index="2-3">选项3</el-menu-item><el-submenu index="2-4"><template slot="title">选项4</template><el-menu-item index="2-4-1">选项1</el-menu-item><el-menu-item index="2-4-2">选项2</el-menu-item><el-menu-item index="2-4-3">选项3</el-menu-item></el-submenu></el-submenu><!-- disabled表示禁用 --><el-menu-item index="3" disabled>消息中心</el-menu-item><el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item></el-menu></div>
</body>
<script>new Vue({el:"#div",data() {return {activeIndex: '1',activeIndex2: '1'};},methods: {handleSelect(key, keyPath) {console.log(key, keyPath);}}});
</script>
Element综合案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>学生列表</title><link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css"><script src="../js/vue.js"></script><script src="../element-ui/lib/index.js"></script><style>.el-header{background-color: #93acb4;}.header-img{width: 100px;margin-top: 20px;}</style>
</head>
<body><div id="div"><el-container><!-- 头部 --><el-header class="el-header"><el-container><div><el-image src="img/export.png" class="header-img"></el-image></div><el-menu:default-active="activeIndex2"mode="horizontal"@select="handleSelect"background-color="#93acb4"text-color="white"active-text-color="#ffd04b"style="margin-left: auto;"><el-menu-item index="1">处理中心</el-menu-item><!-- 二级菜单 --><el-submenu index="2"><template slot="title">我的工作台</template><el-menu-item index="2-1">选项1</el-menu-item><el-menu-item index="2-2">选项2</el-menu-item><el-menu-item index="2-3">选项3</el-menu-item></el-submenu><el-menu-item index="3"><a href="学生列表.html" style="display: contents;" target="_self">首页</a></el-menu-item></el-menu></el-container></el-header><el-container style="height: 580px; border: 1px solid #eee"><!-- 侧边栏区域 --><el-aside width="200px" style="background-color: rgb(238, 241, 246)"><!-- 侧边栏默认打开一个部门default-openeds="['1']" --><el-menu :default-openeds="['1']"><el-submenu index="1"><template slot="title"><i class="el-icon-menu"></i>学工部</template><el-menu-item-group><el-menu-item index="1-1"><i class="el-icon-help"></i>在校学生管理</el-menu-item><el-menu-item index="1-2"><i class="el-icon-help"></i>学生升级/留级</el-menu-item><el-menu-item index="1-3"><i class="el-icon-help"></i>学生就业情况</el-menu-item></el-menu-item-group></el-submenu><el-submenu index="2"><template slot="title"><i class="el-icon-menu"></i>咨询部</template><el-menu-item-group><el-menu-item index="2-1"><i class="el-icon-help"></i>意向学生管理</el-menu-item><el-menu-item index="2-2"><i class="el-icon-help"></i>未报名学生管理</el-menu-item><el-menu-item index="2-3"><i class="el-icon-help"></i>已报名学生管理</el-menu-item></el-menu-item-group></el-submenu><el-submenu index="3"><template slot="title"><i class="el-icon-menu"></i>教研部</template><el-menu-item-group><el-menu-item index="3-1"><i class="el-icon-help"></i>已有课程管理</el-menu-item><el-menu-item index="3-2"><i class="el-icon-help"></i>正在研发课程管理</el-menu-item><el-menu-item index="3-3"><i class="el-icon-help"></i>新技术课程管理</el-menu-item></el-menu-item-group></el-submenu></el-menu></el-aside><!-- 主区域 --><el-container><el-main><b style="color: red;font-size: 20px;">学生列表</b><div style="float:right"><el-button type="primary">添加学生</el-button></div><el-table :data="tableData" style="width: 100%;"><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-columnlabel="操作"width="180"><el-button type="warning">编辑</el-button><el-button type="danger">删除</el-button></el-table-column></el-table></el-main></el-container></el-container></el-container></div>
</body>
<script>new Vue({el:"#div",data:{tableData:[{date:"2088-08-08",name:"张三",address:"北京市昌平区"},{date:"2088-08-08",name:"李四",address:"北京市昌平区"},{date:"2088-08-08",name:"王五",address:"北京市昌平区"},]}});
</script>
</html>
相关文章：
Element使用
Element(美化网页） ElementUI的使用注意事项： Element.ui的使用基于Vue环境，于是Element相关组件的使用必须放在Vue对象绑定的视图中去 ElementUI的JS库的引入必须放在vue.js库的后面 <!-- 引入样式 --><link rel"styleshee…...
基于YOLO11深度学习的电瓶车进电梯检测与语音提示系统【python源码+Pyqt5界面+数据集+训练代码】
《------往期经典推荐------》 一、AI应用软件开发实战专栏【链接】 项目名称项目名称1.【人脸识别与管理系统开发】2.【车牌识别与自动收费管理系统开发】3.【手势识别系统开发】4.【人脸面部活体检测系统开发】5.【图片风格快速迁移软件开发】6.【人脸表表情识别系统】7.【…...
R语言的基础命令及实例操作
> T & F [1] FALSE > T & T [1] TRUE > T | F [1] TRUE > F | F [1] FALSE > a <- c(T,F,T) > b <- c(F,F,T) > a & b [1] FALSE FALSE TRUE > a | b [1] TRUE FALSE TRUE 在 R 中，大小写是敏感的，也就是说…...
AI视频生成工具清单（附网址与免费说明）
以下是一份详细的AI视频制作网站总结清单，包含免费/付费信息及核心功能说明： AI视频生成工具清单（附网址与免费说明） 1. Synthesia 网址：https://www.synthesia.io是否免费：免费试用（生成视频…...
知识蒸馏综述Knowledge Distillation: A Survey解读
论文链接：Knowledge Distillation: A Survey 摘要：近年来，深度神经网络在工业界和学术界都取得了成功，尤其是在计算机视觉任务方面。深度学习的巨大成功主要归功于它能够扩展以对大规模数据进行编码，并且能够处理数十…...
第十五届蓝桥杯省赛电子类单片机学习过程记录（客观题）
客观试题： 01．典型的BUCK电源电路包含哪些关键器件（ABCD） A. 电容 B. 二极管 C. 电感 D. MOSFET 解析： 典型的 BUCK 电源电路是一种降压型的直流-直流转换电路，它包含以下关键器件： A.电容：电容在电路中起到滤波的作用。输入电容用于平滑输入电压的波动，减少电源噪声对…...
【C++】：STL详解 —— 红黑树封装map和set
目录 红黑树的源代码 正向迭代器的代码 反向迭代器的代码 set的模拟实现 map的模拟实现 红黑树的源代码 #pragma once #include <iostream>using namespace std; // set ->key // map ->key/value// set ->key // map ->key/valueenum Colour {RED,BLAC…...
【QWEN】机器人控制器的控制周期越短精度越高吗
好的，用户问的是“机器人控制器的控制周期越短精度越高吗”。我需要根据提供的知识库内容来回答这个问题。首先，我得回忆一下知识库里的相关信息。 知识库里有几篇相关的文章。比如，[3]提到控制周期越短，控制性能的上限越高&…...
使用数据库和缓存的时候，是如何解决数据不一致的问题的？
1.缓存更新策略 1.1. 缓存旁路模式（Cache Aside） 在应用里负责管理缓存，读取时先查缓存，如果命中了则返回缓存，如果未命中就查询数据库，然后返回缓存，返回缓存的同时把数据给写入缓存中。更新…...
【c++】平移字符串
说明 实现字符串的左移与右移 示例代码 #include <iostream> #include <string> using namespace std;int main() {string str1 "12345";//左移2位string str2 str1.substr(2) str1.substr(0, 2);cout << str2 << endl;//右移2位&…...
基于Spring Boot的多级缓存架构实现
基于Spring Boot的多级缓存架构实现 以下是一个基于Spring Boot的多级缓存架构实现示例 多级缓存架构实现方案 1. 依赖配置（pom.xml） <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-star…...
为什么DDPG需要目标网络而A2C不需要？
在强化学习中，DDPG需要目标网络而A2C不需要的主要原因在于算法架构、更新方式和目标稳定性需求的差异： Q值估计的稳定性需求不同 DDPG的Critic网络需要估计状态-动作值函数 Q ( s , a ) Q(s,a) Q(s,a)，其目标值的计算涉及下一个状态的最大Q值…...
蓝桥杯 C++ b组 统计子矩阵深度解析
题目大意：给定一个 NM 的矩阵 A，请你统计有多少个子矩阵 (最小11，最大NM) 满足子矩阵中所有数的和不超过给定的整数 K？ 前言：这题很容易想到二维前缀和优化，然后枚举子矩阵，但这样时间复杂度为…...
YOLOv12本地部署教程——42%速度提升，让高效目标检测触手可及
YOLOv12 是“你只看一次”（You Only Look Once, YOLO）系列的最新版本，于 2025 年 2 月发布。它引入了注意力机制，提升了检测精度，同时保持了高效的实时性能。在保持速度的同时，显著提升了检测精度。例如&am…...
每天五分钟深度学习PyTorch：向更深的卷积神经网络挑战的ResNet
本文重点 ResNet大名鼎鼎，它是由何恺明团队设计的，它获取了2015年ImageNet冠军，它很好的解决了当神经网络层数过多出现的难以训练的问题，它创造性的设计了跳跃连接的方式，使得卷积神经网络的层数出现了大幅度提升，设置可以达到上千层，可以说resnet对于网络模型的设计具…...
C++11新特性 11.基于范围的for循环
一.简介 基本概念： 在 C 中，基于范围的 for 循环（Range-based for loop）是一种简化容器遍历的语法糖，适用于所有支持 begin() 和 end() 的容器（如 vector、map、array 等）。以下是其核心用法和…...
Linux搜索---locate
locate locate 是 Linux 系统中用于快速查找文件和目录的命令。它并非实时遍历文件系统，而是通过搜索预先建立的文件数据库来定位文件。该数据库由 updatedb 程序定期（通常是每天）更新，收录了系统中所有文件的路径信息࿰…...
c语言笔记 一维数组与二维数组
1.一维数组和二维数组名加1代表什么意思，偏移多少单位？ 方法：1就是以数组的元素类型的字节为单位去偏移。 先看结论再代码验证： 一维数组名＋1表示加一个整型单位的偏移量，也可以这么理解1就是以数组的元…...
认识Event Loop【1】
前言 这应该是一个系列文章，因为我觉得Event Loop（事件循环）是一件很抽象也很重要的一个机制。eventloop这个知识点处于非常杂糅的位置，和很多其他知识，如运行时、浏览器、渲染流程、数据结构、线程等等，也…...
《Linux栈破坏了，如何还原》
【栈破坏导读】栈破坏有了解过吗？何为栈破坏，栈破坏了，程序会立刻引发崩溃，我们通过gdb去调试coredump，栈被破坏的栈帧是没法被恢复的，这也给我们调试程序带来很大的困难，那如何还原栈破坏的第一…...
环形链表问题的探究与代码实现
在数据结构与算法的学习中，环形链表是一个经典的问题。它不仅考察对链表这种数据结构的理解，还涉及到指针操作和逻辑推理。本文将结合代码和图文，深入分析如何判断链表中是否有环以及如何找到环的入口点。 目录 一、判断链表中是否有环 …...
【CSS3】筑基篇
目录 复合选择器后代选择器子选择器并集选择器交集选择器伪类选择器 CSS 三大特性继承性层叠性优先级 背景属性背景色背景图背景图平铺方式背景图位置背景图缩放背景图固定背景复合属性 显示模式显示模式块级元素行内元素行内块元素 转换显示模式 结构伪类选择器结构伪类选择器…...
React:类组件（上）
kerwin老师我来了 类组件的创建 class组件，js里的类命名首字符大写，类里面包括构造函数，方法 组件类要继承React.Component才有效 必须包含render方法 import React from react class App extends React.Component{render() {return <…...
开启mysql远程登录
目录 前言开启步骤 前言 为了安全考虑，mysql默认不允许远程登录，需要我们自己开启。当然在远程登录之前mysql的端口也要开放。下面是mysql开启远程登录的步骤。 开启步骤 本地登录mysql mysql -u root -p然后输入登录密码 给登录账号授权 GRANT AL…...
Eclipse 查看 JAVA SE 23 官方API 源代码
第一步：下载 JAVA SE 23 官方API 源代码 JavaSE23API源代码资源-CSDN文库 （或者到open jdk网站JDK Builds from Oracle:）下载https://download.java.net/java/GA/jdk23.0.2/6da2a6609d6e406f85c491fcb119101b/7/GPL/openjdk-23.0.2_windows-…...
Spring Cloud之注册中心之Nacos的使用
目录 Naacos 服务注册/服务发现 引⼊Spring Cloud Alibaba依赖 引入Nacos依赖 引入Load Balance依赖 配置Nacos地址 服务端调用 启动服务 Naacos Nacos是Spring Cloud Alibaba的组件, Spring Cloud Alibaba遵循Spring Cloud中定义的服务注册, 服务发现规范. 因此使⽤Na…...
字符串相乘——力扣
给定两个以字符串形式表示的非负整数 num1 和 num2，返回 num1 和 num2 的乘积，它们的乘积也表示为字符串形式。 注意：不能使用任何内置的 BigInteger 库或直接将输入转换为整数。 示例 1: 输入: num1 "2", num2 "3" …...
机试准备第13天
第一题是模拟出入栈游戏。 #include <stdio.h> #include <stack> #include <iostream> using namespace std; int main() {string str;while(getline(cin, str)){stack<char> stk;int j 0;//扫描出栈序列strfor(char i a;i<z;i){stk.push(i);//每…...
基于OpenCV的车牌识别系统（源码+论文+部署教程）
运行环境 基于OpenCV的车牌识别系统运行环境如下： • Python: ≥ 3.5 • OpenCV: ≥ 4.0 • IDE工具：Visual Studio Code（可自行选择） • 技术栈：Python OpenCV Tkinte 主要功能 基于OpenCV的车牌识别系统主要…...
MySQL：CRUD（增删查改）
目录 一、准备工作 二、Create 新增 1、语法 2、单行数据全列插入 3、单行数据指定列插入 4、多行数据指定列插入 5、多行数据全列插入 三、Retrieve 检索 1、语法 2、全列查询 3、指定列查询 4、查询字段为表达式 （1）常量表达式 &…...