ElementUI组件

一 Basic

Basic 总结
 第一块: 用于布局和封装 Layout container
 第二块: 对盒子进行修饰 word color border icon 
 第三块: 触发事件和跳转 click redirect

整体结构

1.1 Layout 布局

1 布局就相当于对组件进行排列，让组件出现在合适的位置

1.2 Container容器

1 容器就相当于一个个盒子，布局侧重的是位置，而盒子就用于封装

1.3 色彩 字体 边框 图标

1 用于对盒子进行修饰

1.4 按钮

1 最常用的组件，用于触发事件

1.5 文字链接

1 用于跳转

二 Form 表单

1 表单核心是form 和form-item

Form 表单总结

 1 第一块: 是选择 单选 多选 下拉选 级联选 穿梭选
 2 第二块: input 用于输入
 3 第三块: 开关和滑块
 4 第四块: others 日期，颜色板，上传，评分 
 5 第五块: from 表单

2.1 Radio 单选框 CheckBox 多选框

1 方便用户勾选内容

2.2 input 输入框

1 用于和用户交互，读取用户输入的数据

2.3 input 计数器

1 用于读取数据

2.4 Select 选择器和Cascader 级联选择

1 方便用户勾选

2.4.1 可搜索的下拉选择器

 <el-select v-model="value" filterable placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
  
1 options            是一个数组，是从后台查询出来的数据
2 :babel             是展示在下拉菜单中数据
3 :value             是给v-model 绑定的键赋值
4 filterable         表示是可以搜索的

2.5 switch开关

1 用于直观展示boolean值

 <el-switch
    v-model="value"
    active-color="#13ce66"
    inactive-color="#ff4949"
    active-value="100"
    inactive-value="0">
  </el-switch>

1 v-model        表示键
2 active-value   表示打开时候的值
3 inactive-value 表示关闭时候的值
4 active-color   表示打开时候的颜色
5 inactive-color 表示关闭时候的颜色

2.6 Slider 滑块

1 暂时没有使用过

2.7 时间日期选择器

1 直接使用就行

2.8 upload 上传

1 用于提交文件

2.9 Rate 评分

1 用于评价给分

2.10 颜色板

1 用于颜色选择

2.11 Transfer 穿梭框

2.12 from 表单

三 Data

第一块: 表格和标签
第二块: 树形控件和分页
第三块: 标记,头像,进度条

3.1 Table 表格

3.2 Tag 标签

3.3 Progress 进度条

3.4 Tree 树形控件

3.5 Pagination 分页

3.6 Badge 标记

3.7 Avatar 头像

四 Notic

Notic 总结
  1 第一块: 加载
  2 第二块: 提示弹框通知

4.1 Alert警告

4.2 Loading 加载

4.3 消息提示

4.4 消息弹框

4.5 消息通知

五 Navigation 导航

暂时没有用上（先不了解）

六 others

第一块: 对话框，轮播图
第二块: 图片，卡片
第三块: 分隔线，日历，无限滚动
第四块: 折叠面板，抽屉

6.1 Dialog对话框

6.2 Card卡片

6.3 Carousel 轮播图

6.4 Collapse折叠面板

6.5 divider 分割线

6.6 Calender 日历

6.7 图片image

6.8 infiniteScroll 无线滚动

6.9 Drawer 抽屉