Container 布局容器

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

• <el‐container>：外层容器。当子元素中包含 <elheader> 或 <el‐footer>时，全部子元素会垂直上下排列，否则会水平左右排列
• <el‐header>：顶栏容器
• <el‐aside>：侧边栏容器
• <el‐main>：主要区域容器
• <el‐footer>：底栏容器

Dropdown 下拉菜单

Dropdown 下拉菜单：将动作或菜单折叠到下拉菜单中

• <el-dropdown split-button>:下拉按钮
• <el-dropdown-menu>下拉菜单
• <el-dropdown-item>下拉项
• divided 分隔

NavMenu 导航菜单

NavMenu 导航菜单：为网站提供导航功能的菜单
<el-menu>:导航菜单
<el-submenu index="1">:导航按钮
<template slot="title">标题和名称 <i class="el-icon-menu">图标 -
<span slot="title">导航二</span>导航标题
<el-menu-item>导航项

Table 表格

Table 表格：用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或
其他自定义操作

• <el-table :data="tableData" stripe>:表格\数据绑定对象\样式
• <el-table-column prop="date" label="日期">:表格行\数据绑定对象属性\表头
  align="center":居中
• slot-scope：作用域插槽，可以获取表格数据
• cope：代表表格数据，可以通过 scope.row 来获取表格当前行数据，scope 不是固定写法
• <el-button type="primary" size="mini"@click="handleUpdate(scope.row)">按钮\类型\大小\事件绑定

Form 表单

• <el-form :model="ruleForm" :rules="rules" ref="ruleForm">:表单/绑定数据模板/绑定校验
• <el-form-item label="活动名称" prop="name">表单项\显示内容\数据模板属性绑定
• <el-input v-model="ruleForm.name">表单输入框/数据绑定
• <el-select v-model="ruleForm.region" placeholder="请选择活动区域">:下拉框/数据绑定/提示
• <el-option label="区域一" value="shanghai"></el-option>:下拉项/数据项
• ref 绑定校验信息
• prop 对应 rules 中对应的校验规则字段名