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;因此需要控制…

微信小程序引导用户打开定位授权通用模版

在需要使用位置信息的页面&#xff08;例如 onLoad 或 onShow 生命周期函数&#xff09;中调用 wx.getSetting 方法检查用户是否已经授权地理位置权限&#xff1a; Page({onLoad: function() {wx.getSetting({success: res > {if (res.authSetting[scope.userLocation]) {/…

力扣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;让你轻松实现这一目标。…

倒计时68天

题单详情 - 蓝桥云课 (lanqiao.cn) 2.2.串门 - 蓝桥云课 (lanqiao.cn) #include<bits/stdc.h> using namespace std; #define int long long const int N2e55; const int inf0x3f3f3f3f; typedef pair<int,int> pii; vector<pii>ve[N]; int dis[N];//记录以…

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

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

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

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

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

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

C++ 手记

extern关键字 extern 存储类用于提供一个全局变量的引用&#xff0c;全局变量对所有的程序文件都是可见的。 当有多个文件且定义了一个可以在其他文件中使用的全局变量或函数时&#xff0c;可以在其他文件中使用 extern 来得到已定义的变量或函数的引用。通常用于当有两个或多…

大数据学习之Redis,十大数据类型的具体应用(二)

目录 3.5 Redis 集合&#xff08;Set&#xff09; 单值多value&#xff0c;且无重复 sadd / smembers / sismember / srem / scard srandmember / spop smove 集合运算 应用场景 3.6 Redis有序集合Zset&#xff08;sorted set&#xff09; 有序有重复 zadd / zrange …

计算机设计大赛 深度学习 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的元数据和消费者信…

代码随想录算法训练营29期Day35|LeetCode 860,406,452

文档讲解&#xff1a;柠檬水找零 根据身高重建队列 用最小数量的箭引爆气球 860.柠檬水找零 题目链接&#xff1a;https://leetcode.cn/problems/lemonade-change/description/ 思路&#xff1a; 很简单&#xff0c;模拟即可。统计五美元、十美元和十五美元的个数。给五美元…

cesium-加载地形图

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

【Java万花筒】通信无限:构建强大的Java应用的电信与通信库

连接世界&#xff1a;发挥Java的电信与通信库的集成能力 前言 通信在现代社会中起着至关重要的作用&#xff0c;而在Java应用程序中集成通信功能可以为用户提供更好的体验。本文将介绍几个强大的电信与通信库&#xff0c;包括Java Communications API (javax.comm)、Apache C…

第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.解决方法 选…