【JavaWeb】Day20.Vue组件库Element——常见组件

常见组件-对话框

Dialog 对话框:在保留当前页面状态的情况下,告知用户并承载相关操作。

首先打开官网(Element - The world's most popular Vue UI framework)找到使用的对话框组件。

以自定义内容为例:

 常见组件-表单

Form 表单:由输入框、选择器、单选框、多选框等控件组成,用以收集、校验、提交数据。

Form单采用Dialog对话框小窗口模式

首先跟table组件一样,创建新的数据模型dialogFomeVisible。

 将需要的官网代码复制到项目中

创建form数据模型以便传入数据 

 定义一个onSubmit方法,将Form中的数据进行JSON格式转化

常见组件-Container 布局容器

用于布局的容器组件,方便快速搭建页面的基本结构:

<el-container>:外层容器。当子元素中包含 <el-header> 或 <el-footer> 时,全部子元素会垂直上下排列,否则会水平左右排列。

<el-header>:顶栏容器。

<el-aside>:侧边栏容器。

<el-main>:主要区域容器。

<el-footer>:底栏容器。

 

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

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

相关文章

【实战】springboot整合swagger及knife4j

文章目录 前言技术积累何为swagger何为knife4jSwagger2与Swagger3注解的主要区别 springboot整合swagger及knife4j导入maven依赖yaml配置编写配置类编写实体和接口 效果展示 前言 对于一个有着资深后端搬砖经验的人来说&#xff0c;最重要的事情就是写API文档了。一个好的API文…

批量删除 rabbitmq中随机队列

批量删除 amq.gen–* 随机队列 操作错误产生了无效随机队列&#xff0c;需要批量删除 过滤列出指定amq.gen–队列 # 列出 指定 vhost/qq 以amq.gen开头的所有队列 rabbitmqctl list_queues --vhost / | grep ^amq.gen-# 批量删除队列 #由于list_queues会列出队列名称以及对应…

蓝桥杯真题Day40 倒计时19天 纯练题!

蓝桥杯第十三届省赛真题-统计子矩阵 题目描述 给定一个 N M 的矩阵 A&#xff0c;请你统计有多少个子矩阵 (最小 1 1&#xff0c;最大 N M) 满足子矩阵中所有数的和不超过给定的整数 K? 输入格式 第一行包含三个整数 N, M 和 K. 之后 N 行每行包含 M 个整数&#xf…

Python基本运算

1.逻辑运算符 第四行会有黄色的下划线是因为这个不是系统推荐的写法&#xff0c;系统推荐的是第五行的链式比较&#xff1b; 2.短路求值 对于and而言&#xff0c;左边的语句是false&#xff0c;那么整体一定是false,右边的表达式就不会进行计算&#xff1b; 对于or而言&…

Nginx 简介

文章目录 前言一、pandas是什么&#xff1f;二、使用步骤 1.引入库2.读入数据总结 一.Nginx简介 Nginx具有轻量级、高性能和低内存占用等特点&#xff0c;可以在多核处理器上有效地分配负载。它可以作为静态内容服务器&#xff0c;也可以作为反向代理服务器&#xff0c;将请…

【软考】UML中的图之状态图

目录 1. 说明2. 图示 1. 说明 1.状态图&#xff08;State Diagram&#xff09;展现了一个状态机。2.由状态、转换、事件和活动组成。3.关注系统的动态视图。4.对于接口、类和协作的行为建模尤为重要。5.强调对象行为的事件顺序。6.通常包括简单状态和组合状态、转换&#xff0…

基于ssm的bbs论坛系统

开发环境&#xff1a;idea 前端&#xff1a;JQueryBootstraplayui后端&#xff1a;SpringSpringMVCMybatis数据库&#xff1a;mysqlredis 基于ssm的bbs论坛系统&#xff0c;功能有论坛、导读、动态、排行榜以及后台管理系统等等 话不多说&#xff0c;看图&#xff01;&#x…

13 完全分布式搭建-集群配置

1.集群部署规划 NameNode 和 SecondaryNameNode 不要安装在同一台服务器 ResourceManager 也很消耗内存&#xff0c;不要和 NameNode、SecondaryNameNode 配置在 同一台机器上。 在文章中与教材上有区别&#xff0c;在理论课上已讲解。 masterslave01slave02HDFS NameNode D…

初入C++

C 编译时的查找&#xff1a; 先到函数局部域里查找到全局域找 局部域和全局域会改变生命周期。 命名空间域不会影响变量的生命周期。 默认情况下不会到命名空间域去找。(命名空间域内的变量的生命周期是全局的&#xff0c;及不会出命名空间就销毁) 在不同的作用域可以定义同…

mysql主从复制、读写分离

一、主从复制架构和原理 1.1 主从复制类型 基于SQL语句的复制(STATEMENT默认) 基于行的复制(ROW&#xff09; 混合类型的复制(MIXED) 1.2主从复制的工作流程及原理 1.2.1 工作流程 ① 当数据来的时候&#xff0c;主服务器把操作记录二进制日志中&#xff0c;存储放入磁盘 ②…

SpringCloud Alibaba实战和源码(8)OpenFeign使用

1、 使用Feign实现远程HTTP调用 1.1、常见HTTP客户端 HttpClient HttpClient 是 Apache Jakarta Common 下的子项目&#xff0c;用来提供高效的、最新的、功能丰富的支持 Http 协 议的客户端编程工具包&#xff0c;并且它支持 HTTP 协议最新版本和建议。HttpClient 相比传统 J…

3.28学习总结

java 封装 封装体现了java的面向对象的特点,用户不用知道程序是如何运行的,只用按照所给的格式输入参数,便可得到对应的结果. 一个完整的封装需要每个实例变量都用private来修饰并拥有相应的public getter和setter方法. 代码 public class girl {private int age;public st…

爬取豆瓣电影分类排行榜中的电影详情数据

进入界面&#xff0c;右键打开检测&#xff0c;选择网络 然后网页滚动条拉倒最下面使其刷出新的数据&#xff0c;然后查看数据包 编写代码 import requests import jsonif __name__ __main__:get_url https://movie.douban.com/j/chart/top_listheaders {User-Agent:Mozil…

每日一题 --- 快乐数[力扣][Go]

快乐数 题目&#xff1a;202. 快乐数 编写一个算法来判断一个数 n 是不是快乐数。 「快乐数」 定义为&#xff1a; 对于一个正整数&#xff0c;每一次将该数替换为它每个位置上的数字的平方和。然后重复这个过程直到这个数变为 1&#xff0c;也可能是 无限循环 但始终变不到…

云原生应用(5)之Dockerfile精讲及新型容器镜像构建技术

一、容器与容器镜像之间的关系 说到Docker管理的容器不得不说容器镜像&#xff0c;主要因为容器镜像是容器模板&#xff0c;通过容器镜像我们才能快速创建容器。 如下图所示&#xff1a; Docker Daemon通过容器镜像创建容器。 二、容器镜像分类 操作系统类 CentOS Ubuntu 在…

OSCP靶场--GLPI

OSCP靶场–GLPI 考点(CVE-2022-35914 php执行函数绕过ssh端口转发jetty xml RCE) 1.nmap扫描(ssh端口转发) ## ┌──(root㉿kali)-[~/Desktop] └─# nmap 192.168.194.242 -sV -sC --min-rate 2500 Starting Nmap 7.92 ( https://nmap.org ) at 2024-03-26 22:22 EDT Nmap…

游戏本笔记本更换@添加内存条实操示例@DDR5内存条

文章目录 添加内存条的意义准备工具设备拔出电源适配器并关机&#x1f47a;样机 内存条上的金手指安装过程Notes 安装后开机初次开机速度屏幕显示分辨率和闪烁问题检查安装后的效果 添加内存条的意义 参考双通道内存DDR5多通道内存-CSDN博客 准备工具 准备一个质量差不多的螺…

go面向对象

继承 封装 多态 定义结构体 //定义老师的结构体 type Teacher struct {Name stringAge intSchool string }func main() {var t1 Teacherfmt.Println(t1)t1.Name "tom"t1.Age 20t1.School "school"fmt.Println(t1) } 结构体实例的创建 package ma…

c++ 有名对象和匿名对象

c 有名对象和匿名对象 有名对象就是有名字的对象&#xff0c;匿名对象就是没有名字的对象。 #define _CRT_SECURE_NO_WARNINGS 1 using namespace std; #include<iostream> class score { public:score(){math 100;chinese 100;english 100;}score(int _math, int _…

spring-boot-devtools配置和原理

一、前言 昨天&#xff0c;一个同事Eclipse在启动SpringBoot项目时一直不停地加载&#xff0c;后来发现是因为spring-boot-devtools造成的问题&#xff0c;因为我们把日志输出的目录设置在当前项目里&#xff08;~/mnt/logs/&#xff0c;这样设置是因为mac电脑没有根目录权限&…