ElementUI 组件:Container 布局容器实例

ElementUI安装与使用指南

Container 布局容器

点击下载learnelementuispringboot项目源码

效果图

在这里插入图片描述

在这里插入图片描述

项目里el-container-example.vue代码

<script>
export default {name: 'el_container_example',data() {const item = {date: '2024-01-31',name: '国龙',address: '上海市某区某小区0001号'};return {tableData: Array(20).fill(item)}}
};</script><!--
https://element.eleme.cn/#/zh-CN/component/container
--><template><el-container style="height: 500px;margin-left: 100px; margin-right: 100px; border: 1px solid #eee"><el-aside width="200px" style="background-color: rgb(238, 241, 246)"><el-menu :default-openeds="['1', '3']"><el-submenu index="1"><template slot="title"><i class="el-icon-message"></i>导航一</template><el-menu-item-group><template slot="title">分组一</template><el-menu-item index="1-1">选项1</el-menu-item><el-menu-item index="1-2">选项2</el-menu-item></el-menu-item-group><el-menu-item-group title="分组2"><el-menu-item index="1-3">选项3</el-menu-item></el-menu-item-group><el-submenu index="1-4"><template slot="title">选项4</template><el-menu-item index="1-4-1">选项4-1</el-menu-item></el-submenu></el-submenu><el-submenu index="2"><template slot="title"><i class="el-icon-menu"></i>导航二</template><el-menu-item-group><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-group><el-menu-item-group title="分组2"><el-menu-item index="2-3">选项3</el-menu-item></el-menu-item-group><el-submenu index="2-4"><template slot="title">选项4</template><el-menu-item index="2-4-1">选项4-1</el-menu-item></el-submenu></el-submenu><el-submenu index="3"><template slot="title"><i class="el-icon-setting"></i>导航三</template><el-menu-item-group><template slot="title">分组一</template><el-menu-item index="3-1">选项1</el-menu-item><el-menu-item index="3-2">选项2</el-menu-item></el-menu-item-group><el-menu-item-group title="分组2"><el-menu-item index="3-3">选项3</el-menu-item></el-menu-item-group><el-submenu index="3-4"><template slot="title">选项4</template><el-menu-item index="3-4-1">选项4-1</el-menu-item></el-submenu></el-submenu></el-menu></el-aside><el-container><el-header style="text-align: right; font-size: 12px"><el-dropdown><i class="el-icon-setting" style="margin-right: 15px"></i><el-dropdown-menu slot="dropdown"><el-dropdown-item>查看</el-dropdown-item><el-dropdown-item>新增</el-dropdown-item><el-dropdown-item>删除</el-dropdown-item></el-dropdown-menu></el-dropdown><span>国龙</span></el-header><el-main><el-table :data="tableData"><el-table-column prop="date" label="日期" width="140"></el-table-column><el-table-column prop="name" label="姓名" width="120"></el-table-column><el-table-column prop="address" label="地址"></el-table-column></el-table></el-main></el-container></el-container>
</template><style>
.el-header {background-color: #B3C0D1;color: #333;line-height: 60px;
}.el-aside {color: #333;
}
</style>

Container 布局容器参考:ElementUI 组件:Container 布局容器

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

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

相关文章

并网逆变器学习笔记8---平衡桥(独立中线模块)控制

参考文献&#xff1a;《带独立中线模块的三相四线制逆变器中线电压脉动抑制方法》---赵文心 一、独立中线模块的三相四线拓扑 独立中线模块是控制中线电压恒为母线一半&#xff0c;同时为零序电流ineu提供通路。不平衡负载的零序电流会导致中线电压脉动&#xff0c;因此需要控制…

力扣hot100 分割回文串 集合 dfs

Problem: 131. 分割回文串 文章目录 思路Code&#x1f496; DP预处理版 思路 &#x1f468;‍&#x1f3eb; 参考题解 Code import java.util.ArrayDeque; import java.util.ArrayList; import java.util.Deque; import java.util.List;public class Solution {int n;//字符…

卷子怎么扫描成电子版?试试这些软件

卷子怎么扫描成电子版&#xff1f;随着科技的进步&#xff0c;越来越多的纸质文档正在被数字化所取代。如果你手头有一份纸质试卷&#xff0c;想要将其转化为电子版&#xff0c;却不知道该如何操作&#xff0c;那么今天我们将为你介绍5款软件&#xff0c;让你轻松实现这一目标。…

探索美颜技术:美颜SDK是什么?

今天&#xff0c;笔者将于大家一同探讨美颜技术&#xff0c;重点聚焦于美颜SDK的定义、工作原理以及在不同领域的应用&#xff0c;以期为读者带来一场有关美颜技术背后秘密的深度探索。 一、什么是美颜SDK&#xff1f; 美颜SDK是一套旨在为开发者提供美颜算法和功能的工具包。…

安卓主板_紫光展锐T820安卓主板方案定制

安卓主板采用了性能强劲的紫光展锐T820八核处理器&#xff0c;搭载了Android 13系统&#xff0c;为用户带来更加顺畅的操作体验。该主板不仅采用了6nm工艺&#xff0c;更加强大的算力和优越的性能&#xff0c;能够轻松实现多任务运行&#xff0c;不会出现卡顿现象。 此外&#…

和朋友随时随地玩——幻兽帕鲁服务器极简部署流程

什么是游戏服务器&#xff1f;通俗来说就是一个公共的电脑&#xff0c;玩家可以在任意时刻进入服务器游玩&#xff0c;不需要等待某个玩家创建房间&#xff0c;即可任意在一个世界一起游戏 本文将为您提供极简部署幻兽帕鲁服务器的指引&#xff0c;「仅需轻点三次鼠标&#xff…

计算机设计大赛 深度学习 python opencv 动物识别与检测

文章目录 0 前言1 深度学习实现动物识别与检测2 卷积神经网络2.1卷积层2.2 池化层2.3 激活函数2.4 全连接层2.5 使用tensorflow中keras模块实现卷积神经网络 3 YOLOV53.1 网络架构图3.2 输入端3.3 基准网络3.4 Neck网络3.5 Head输出层 4 数据集准备4.1 数据标注简介4.2 数据保存…

Kafka 记录

推荐资源 官网http://kafka.apache.org/Githubhttps://github.com/apache/kafka书籍《深入理解Kafka 核心设计与实践原理》 Kafka 架构 Kafka使用ZooKeeper作为其分布式协调框架&#xff0c;其动态扩容是通过ZooKeeper来实现的。Kafka使用Zookeeper保存broker的元数据和消费者信…

cesium-加载地形图

废话不多说 直接代码 <template><div id"cesiumContainer" style"height: 100vh;"></div><div id"toolbar" style"position: fixed;top:20px;left:220px;"><el-breadcrumb><el-breadcrumb-item>…

第3章-python深度学习——(波斯美女)

第3章 神经网络入门 本章包括以下内容&#xff1a; 神经网络的核心组件 Keras 简介 建立深度学习工作站 使用神经网络解决基本的分类问题与回归问题 本章的目的是让你开始用神经网络来解决实际问题。你将进一步巩固在第 2 章第一个示例中学到的知识&#xff0c;还会将学到的…

外汇监管牌照解析:确保交易安全与合规性

外汇交易中&#xff0c;资金安全与平台监管是大家最关心的话题。监管是评估外汇经纪商是否值得信赖、是否具备相关资质的关键依据&#xff0c;因此选择一家拥有海外合法监管的经济商至关重要。 那么&#xff0c;今天我们就来聊聊全球权威的几大监管机构 — FCA、ASIC、NFA、FSA…

【思科】 GRE VPN 的实验配置

【思科】GRE VPN 的实验配置 前言报文格式 实验需求配置拓扑GRE配置步骤R1基础配置GRE 配置 ISP_R2基础配置 R3基础配置GRE 配置 PCPC1PC2 抓包检查OSPF建立GRE隧道建立 配置文档 前言 VPN &#xff1a;&#xff08;Virtual Private Network&#xff09;&#xff0c;即“虚拟专…

多线程事务如何回滚?

背景介绍 1&#xff0c;最近有一个大数据量插入的操作入库的业务场景&#xff0c;需要先做一些其他修改操作&#xff0c;然后在执行插入操作&#xff0c;由于插入数据可能会很多&#xff0c;用到多线程去拆分数据并行处理来提高响应时间&#xff0c;如果有一个线程执行失败&am…

在Mixamo网站上,下载的动画导入unity给自己的模型添加后出错怎么解决

在Mixamo网站上&#xff0c;下载的动画导入unity给自己的模型添加后出错 一、在Mixamo下载的模型可以正常使用二、在自己的模型和unity自带模型上就出错1.解决方法2.解决成功 注意 一、在Mixamo下载的模型可以正常使用 二、在自己的模型和unity自带模型上就出错 1.解决方法 选…

Linux ubuntu 20.4.6安装docker

这边需要在vm中使用docker&#xff0c;记录下 1.更新系统包列表 确保您的系统包列表是最新的 sudo apt update 2.安装依赖工具 sudo apt install apt-transport-https ca-certificates curl software-properties-common 3.添加Docker GPG密钥 curl -fsSL https://downloa…

Centos 7.9 在线安装 VirtualBox 7.0

1 访问 Linux_Downloads – Oracle VM VirtualBox 2 点击 ​the Oracle Linux repo file 复制 内容到 /etc/yum.repos.d/. 3 在 /etc/yum.repos.d/ 目录下新建 virtualbox.repo&#xff0c;复制内容到 virtualbox.repo 并 :wq 保存。 [rootlocalhost centos]# cd /etc/yum.rep…

【数据结构 05】双链表

一、原理 双链表又称双向链表&#xff0c;通常情况下是带头循环结构&#xff0c;在CSTL标准模板库中封装的<list.h>头文件就是带头双向循环链表。 特性&#xff1a;增删灵活且高效&#xff0c;支持随机增删但不支持随机访问 设计思路&#xff1a; 链表包含一个头节点h…

【Linux】模拟实现一个简单的minishell

目录 从显示屏获取输入字符流 分割字符串 取出命令名称及选项 去除输入时多按的那个换行符 创建子进程&#xff0c;实现程序替换 如果替换失败&#xff0c;进程终止exit 查看子进程情况 实现echo $?功能 实现cd 最终代码 基本思路 让父进程创建一个子进程&#xff0c…

[NCTF2019]Fake XML cookbook(特详解)

先试了一下弱口令&#xff0c;哈哈习惯了 查看页面源码发现xml function doLogin(){var username $("#username").val();var password $("#password").val();if(username "" || password ""){alert("Please enter the usern…

CISAW和CISP-PTE证书选择指南

&#x1f4e3;在信息安全领域&#xff0c;选择合适的证书可以为你的职业生涯增添光彩。很多从事信息渗透行业的朋友经常讨论CISP-PTE和CISAW之间的选择问题。今天就从4个方面带你详细了解这两张证书&#xff0c;帮你做出明智的选择&#xff01; 1️⃣证书的行业前景 &#x1f4…