1.为了防止出现下面的尴尬局面,主页内容撑大,没有滚动条 2.全局给el-main设置固定高度,多出的内容会自动出现滚动条,主要是紫色部分代码 <template><div><el-container><Aside></Aside><el-container><el-header><Header></Header></el-header><el-main><router-view></router-view></el-main></el-conta...
--引入自定义左侧菜单栏--><left-menu></left-menu></el-aside><el-main><!--引入跳转路由--><router-view></router-view></el-main></el-container></el-container></div></template><script>import HomeHeader from './components/Header' import LeftMenu from './components/LeftMenu' export def...
--右侧主体区域--><el-main></el-main></el-container></el-container> 2.左侧菜单布局 菜单分为二级,并且可以折叠。 需要使用到ElementUI中提供的NavMenu导航菜单 <el-menu><el-submenu><!--这个 template 是一级菜单的内容模板--><iclass="el-icon-menu"></i><span>一级菜单</span><!--在一级...
<el-header>:顶栏容器。 <el-aside>:侧边栏容器。 <el-main>:主要区域容器。 <el-footer>:底栏容器。 大致的页面布局效果: 代码: <el-container> <el-header>Header</el-header> <el-container> <el-aside width="200px">Aside</el-aside> <el-main>Main</el-main> </el-container> </el-conta...
说明:el-container标签是整个布局容器,el-header标签是容器上方(含“管理系统”的上方部分),el-aside标签是旁边的菜单列表,el-main标签是右边白色区域(后面会设置它显示后端传过来的数据)。 注:相关代码可以直接去Element官网找“Container布局容器”。 实现上述效果的代码(Home.vue组件)如下,后面讲解的内容都在上述代...
vue element 控件之 el-container中的el-side 与 el-main 的间距怎么设置 效果: 如图所示,当我们在页面中同时使用el-container中的el-side 与 el-main组件时,默认情况下两个组件是挨在一起的。 查询官方文档,如图所示,el-side 与 el-main之间默认是无间距的。没有相关的属性可以设置布局。
<el-main>:主要区域容器。 <el-footer>:底栏容器。 嵌套容器 <el-container> <el-header><div><h1>我是标题</h1></div></el-header> <el-container> <el-aside><div><h1>我是菜单</h1></div></el-aside> <el-main><div><h1>我是内容</h1></div></el-main> </el-container> <el-...
.el-menu { border-right: none; } } .el-main { background-color: #eaedf1; }</style> 此时页面效果如下所示: image.png 设置全局样式 image.png /*全局样式表*/html,body,#app{height:100%;marginpadding:0;} 注需要将全局样式文件引入到main.js中 ...
element 怎么设置<el-main>里的iframe大小占满剩余空间?设置iframe的width,height的百分比,火狐和谷歌的显示还不一样,怎么解决? <style> .el-main { background-color: rosybrown; color: #333; text-align: center; line-height: 84vh; } </style> <el-main> <iframe style="width:100%" src="http:/...
el-main:页面主视图 icons的使用 在element-ui 中,图标是用class就可以搞定的。 比如一个编辑的图标就可以如下表示: 按钮(el-button) 按钮是el-button来表示的 按钮是分类的,每一种类型就对应不同的button。 按钮的类型type可取值:’primary’、’success’、’warning’、’info’、’danger’ ...