Element-Ui记录(二)——Container组件布局

最新推荐文章于 2024-07-18 11:11:53 发布

coderhorse

最新推荐文章于 2024-07-18 11:11:53 发布

阅读量2.5k

点赞数 1

文章标签： elementui 前端学习 javascript vue.js

本文链接：https://blog.csdn.net/majunze123/article/details/125558983

版权

这篇博客详细介绍了Element-Ui中的Container组件，包括它的四种类型：container、header、aside、main，以及在实际布局中的应用。通过代码展示和效果图解释了Container如何管理和定义内容的子元素，如实现七分container与三分aside的布局效果，以及在el-menu中的使用。文章还提到了default-openeds属性和el-menu-item的使用，提供了完整的代码示例和效果展示。

摘要由CSDN通过智能技术生成

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

<el-header>：顶栏容器。

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

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

<el-footer>：底栏容器。

containner占七分 aside占三分

代码展示

<el-container>
  <el-aside width="200px">Aside</el-aside>
  <el-container>
    <el-header>Header</el-header>
    <el-main>Main</el-main>
    <el-footer>Footer</el-footer>
  </el-container>
</el-container>

效果图

好的，ok，再介绍一下实战的布局属性

<el-menu>：外层容器。管理定义内容的子元素

:default-openeds 设置el-menu列表默认打开。

<el-submenu>：定义一个可点击的点击菜单。

<template>：el-menu的子元素用来定义el-menu点击列表的列表名字

<el-menu-item>：按钮元素，菜单列表的单位元素。

<el-menu-item-group>：el-men-item的分组元素。

emmmm，说的不是很清楚xdm。

列表代码展示（aside）

<template>
  <div id="app">
    <el-container style="height: 500px; 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-submenu>
              <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-submenu>
            <el-submenu index="1-2">
                <template slot="title">分组2</template>
              <el-menu-item index="1-3">选项3</el-menu-item>

            &