containner布局容器

在编写vue项目的时候在标签

<template>网页的主要内容</template>，可以将<script><style>都可以写这一个页面，类似于html页面

Container 布局容器

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

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

<el-header>：顶栏容器。

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

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

<el-footer>：底栏容器。

在每一个组件里面就可以写div,进行布局，这些组件采用了flex布局，使用前确定浏览器的兼容性，此外<el-container>：子元素只能是后面的四个

 Layout 布局

通过 row 和 col 组件，并通过 col 组件的 span 属性我们就可以自由地组合布局。

例子：<el-row> <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col> </el-row>

 Button 按钮

<el-button type="primary" disabled>主要按钮</el-button>

表格：当el-table元素中注入data对象数组后，在el-table-column中用prop属性来对应对象中的键名即可填入数据，用label属性来定义表格的列名。可以使用width属性来定义列宽。

列子： 

 

 

 

 

 

 NavMenu 导航菜单

顶栏的设计；导航菜单默认为垂直模式，通过mode属性可以使导航菜单变更为水平模式。另外，在菜单中通过submenu组件可以生成二级菜单。Menu 还提供了background-color、text-color和active-text-color，分别用于设置菜单的背景色、菜单的文字颜色和当前激活菜单的文字颜色。

https://element.eleme.cn/#/zh-CN/component/menu

2.通过el-menu-item-group组件可以实现菜单进行分组，分组名可以通过title属性直接设定，也可以通过具名 slot 来设定；<el-menu-item index="1-1">选项1</el-menu-item>