<el-radio v-model=“label” @change=“aa” name=“sex” label=“男”>男

<el-radio v-model=“label” @change=“aa” name=“sex” border size=“small” label=“女”>女

  • 组件的 方法(Methods)：

在对应的组件中加入 ref="组件别名"；

通过 this.$refs.组件别名.方法名() 调用方法；

方法的使用

<el-button @click=“focusInputs”>focus方法

<el-button @click=“blurInputs”>blur方法

Basic 组件

===========================================================================

Button 按钮

官方文档索引：https://element.eleme.cn/#/zh-CN/component/button

  • 大部分用法是设置 button 的样式，注意 按钮组 的用法；

Link 文字链接

官方文档索引：https://element.eleme.cn/#/zh-CN/component/link

Layout 布局

官方文档索引：https://element.eleme.cn/#/zh-CN/component/layout

  • Element UI 中是 24 分栏，迅速简便地创建布局。
  • 一个布局组件由 el-row 和 el-col 组合构成，使用属性时要区分 行属性 与 列属性；
  • <el-row :gutter="20"> 指定每一栏之间的间隔，默认间隔为 0；
  • <el-col :span="24"> 用来组合一栏的布局，一栏是分为 24 部分；
  • <el-col :span="6" :offset="6"> 中利用 offset 指定分栏偏移的栏数；

Container 布局容器

官方文档索引：https://element.eleme.cn/#/zh-CN/component/container#container-bu-ju-rong-qi

  • Container 是用于布局的容器组件，方便快速搭建页面的基本结构；
  • 容器包含 <el-container>、<el-header>、<el-aside>、<el-main>、<el-footer>；

Form 组件

==========================================================================

Radio 单选框

官方文档索引：https://element.eleme.cn/#/zh-CN/component/radio

  • 在使用 Radio 时至少加入 v-model 和 label 两个属性；
  • 注意 Radio 按钮组；

Checkbox 多选框

官方文档索引：https://element.eleme.cn/#/zh-CN/component/checkbox

Input 输入框

官方文档索引：https://element.eleme.cn/#/zh-CN/component/input

  • Input 为受控组件，它总会显示 Vue 绑定值。
  • autocomplete 是一个带 输入建议 的输入框组件，也可以自定义输入建议显示模板；
  • 事件的使用：

<el-input v-model=“username” @blur=“aaa” @focus=“bbb”

@clear=“clears” clearable @input=“ccc”>

  • 方法的使用：

方法的使用

<el-button @click=“focusInputs”>focus方法

<el-button @click=“blurInputs”>blur方法

Select 选择器

官方文档索引：https://element.eleme.cn/#/zh-CN/component/select

  • 事件的使用：

<el-select v-model=“cityId” @change=“aaa” multiple clearable>

<el-option v-for=“option in options” :label=“option.name”

:value=“option.id” :key=“option.id”>

  • 方法的使用：

1.给组件通过ref起别名并绑定到vue实例中

<el-select ref=“selects” v-model=“cityId” @change=“aaa” multiple clearable>

…

2.调用方法

this.$refs.selects.focus(); //方法调用

Switch 开关

官方文档索引：https://element.eleme.cn/#/zh-CN/component/switch

  • 事件的使用：

<el-switch v-model=“value” @change=“aaa”>

  • 方法的使用：

<el-button @click=“bbb”>调用方法