Element-UI参数与注意事项

详细内容，见官方文档：element-ui文档

1.布局

置顶：标签内属性（Attributes）的使用方式为：

• <el-row :gutter = "6">；
• <el-button type="primary">；

分栏偏移：

    <el-row :gutter="20">
      <el-col :span="6" ><div class="grid-content bg-purple-dark"></div></el-col>
      <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
    </el-row>
    <el-row :gutter="30">
      <el-col :span="6" :offset="6"><div class="grid-content bg-purple-dark"></div></el-col>
      <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
    </el-row>
    <el-row :gutter="40">
      <el-col :span="12" :offset="6"><div class="grid-content bg-purple-dark"></div></el-col>
    </el-row>

效果图如下：

注意了offset表示的是从左边开始偏，偏移的位置是从span剩下的24份中的几分，按照百分比来偏移的。

比如

响应式布局：

  <el-row :gutter="10">
    <el-col :xs="8" :sm="6" :md="4" :lg="3" ><div class="grid-content bg-purple"></div></el-col>
    <el-col :xs="4" :sm="6" :md="8" :lg="9" ><div class="grid-content bg-purple-dark"></div></el-col>
    <el-col :xs="4" :sm="6" :md="8" :lg="9" ><div class="grid-content bg-purple"></div></el-col>
    <el-col :xs="8" :sm="6" :md="4" :lg="3" ><div class="grid-content bg-purple-dark"></div></el-col>
  </el-row>

上面有四个属性，xs、sm、md、lg它们的作用分别是：

• xs：浏览器窗口宽度最小时显示的比例；
• sm：浏览器窗口宽度较小时显示的比例；
• md：浏览器窗口宽度中等时显示的比例；
• lg：浏览器窗口宽度最大时显示的比例；

可以通过调节这四个属性的比例数来决定浏览器不同宽度下的布局；

不一定四个属性都要加，看需要多少中响应式支持。

Row Attributes

Col Attributes

2.看文档的注意事项

如上图所示，这里的参数是写在标签内的属性：

<el-row type="flex" class="row-bg">
  <el-col :span="12" :offset="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>

<el-row :gutter="20" class="row-bg">
  <el-col :span="12" :offset="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>

如上述代码所示，这里的属性有两种写法：

• 动态绑定属性值：（:gutter="20"）；
• 直接写：（type）；

具体那种才是正确的使用方式，参照文档；

3.Container 布局容器

注意看如下布局：

代码为：

<el-container>  								<!-- 第1层容器 -->
  <el-header>Header</el-header> 				<!-- 第2层容器，并列header -->
  <el-container> 								<!-- 第2层容器 -->
    <el-aside width="200px">Aside</el-aside> 	<!-- 第3层容器，并列aside -->
    <el-container> 								<!-- 第3层容器 -->
      <el-main>Main</el-main>					<!-- 第3层容器内main -->
      <el-footer>Footer</el-footer>				<!-- 第3层容器内footer -->
    </el-container>
  </el-container>
</el-container>

也就是说，element-ui是按行分容器的；原则是：大于一个部分的内容都使用一个容器包裹

• 首先，整个页面用一个容器包起来；

• 然后，可以分为header和header之外两个部分；

• header之外部分用一个容器（container）存放，也就是第二层容器。

• 第二层容器内可分为aside和aside之外部分。所以可以将aside之外部分放入一个容器中，也就是第三层容器；

• 第三层容器内放入main和footer两个部分。

Container Attributes

Header Attributes

Aside Attributes

Footer Attributes

4.按钮button

按钮的属性对照表：

Attributes

5.单选框

<template>
  <el-radio v-model="radio" label="1">备选项</el-radio>
  <el-radio v-model="radio" label="2">备选项</el-radio>
</template>

<script>
  export default {
    data () {
      return {
        radio: '1'
      };
    }
  }
</script>

表示两个el-radio控件都绑定了data中的radio值，并且这个值可以通过每个el-radio上的label属性指定；当选中某一个el-radio时，它的label值与data中的radio值同步；

Radio Attributes

label属性写法不能混用

注意事项：两种绑定属性的写法不能混用。

• 使用label="你好棒"，这种方式时双引号里面可以是除了数字的其他字符串；
• 使用:label="4"，这种方式双引号里面只能是数字，这样写：:label="错误"是错误的；

这里说的只是label属性不能两种写法混用，但是其他标签的其他属性就不一定了。

Radio Events

Radio-group Attributes

Radio-group Events

Radio-button Attributes

6.多选框

多选框组

<template>
  <el-checkbox-group v-model="checkList">
    <el-checkbox label="复选框 A"></el-checkbox>
    <el-checkbox label="复选框 B"></el-checkbox>
    <el-checkbox label="复选框 C"></el-checkbox>
    <el-checkbox label="禁用" disabled></el-checkbox>
    <el-checkbox label="选中且禁用" disabled></el-checkbox>
  </el-checkbox-group>
</template>

<script>
  export default {
    data () {
      return {
        checkList: ['选中且禁用','复选框 A']
      };
    }
  };
</script>

整个el-checkbox-group绑定checkList，里面的el-checkbox选中了它的label值就会添加到data中的checkList中。

Checkbox Attributes

(:)label表示存在两种写法：label和:label。

Checkbox Events

Checkbox-group Attributes

Checkbox-group Events

Checkbox-button Attributes

小规律

有没有发现，凡是Attribute的值为数字（number）或者布尔值（boolean）的都可以采用两种写法：

disabled和:disabled。

7.Input 输入框

Input Attributes

Input slots

Input Events

Input Methods

Autocomplete Attributes

再次小规律

当Attribute的值为Number或者Boolean时，可以采用了两种写法disabled和:disabled。

并且，值为Boolean时，disabled === disableed=“true”，只有当为false时才需要显式声明。

Autocomplete slots

Autocomplete Events

8.InputNumber计数器

Attributes

小规律

所以，即使没有特殊标明可以使用:写法的属性，只要它的属性值为Number或者Boolean类型，都可以使用两种属性写法。再不放心，实验一下也是可以的。

Events

Methods

9.Select选择器

Select Attributes

Select Events

Option Group Attributes

Option Attributes

Methods

10.Cascader级联选择器

Attributes

props

Events

11.Switch开关

Attributes

Events

Methods

12.Slider滑块

Attributes

小诀窍

属性值凡是Number或者Boolean类型的都可以采用两种写法。之后将不会为这些属性一一注明了。

Events

12.TimePicker时间选择器

Attributes

Time Select Options

Time Picker Options

Events

Methods

13.DatePicker 日期选择器

Attributes

Picker Options

Shortcuts

Events

Methods

14.Upload上传

Attribute

Methods

15.Rate评分

Attributes

Events

16.ColorPicker 颜色选择器

Attributes

Events

17.transfer穿梭框

有点难啊。

Attributes

Slot

Events

18.Form表单

Form Attributes

Form Methods

Form-Item Attributes

Form-Item Slot

Form-Item Methods

19.Table 表格

Table Attributes

Table Events

Table Methods

Table Slot

Table-column Attributes

20.Tag 标签

Attributes

Events

21.Progress进度条

Attributes

22.Tree树形控件

Attributes

props

方法

Tree 拥有如下方法，返回目前被选中的节点数组：

Events

23.Pagination分页

Attributes

Events

Slot

24.Badge 标记

Attributes

25.Alert 警告

Attributes

Events

26.Loading加载

Options

27.Message消息提示

Options

方法

调用 Message 或 this.$message 会返回当前 Message 的实例。如果需要手动关闭实例，可以调用它的 close 方法。

28.MessageBox弹框

Options

29.Notification通知

Options

方法

调用 Notification 或 this.$notify 会返回当前 Notification 的实例。如果需要手动关闭实例，可以调用它的 close 方法。