element组件---Form

Radio 单选框
Checkbox 多选框
Input 输入框
InputNumber 计数器
Select 选择器
Cascader 级联选择器
Switch 开关
Slider 滑块
TimePicker 时间选择器
DatePicker 日期选择器
DateTimePicker 日期时间选择器
Upload 上传
Rate 评分
ColorPicker 颜色选择器
Transfer 穿梭框
Form 表单
Radio 单选框
基础用法

禁用状态

单选框组

按钮样式

带有边框

Checkbox 多选框
基础用法

禁用状态

多选框组

indeterminate 状态

可选项目数量的限制

按钮样式

带有边框

Input 输入框通过鼠标或键盘输入字符
Input 为受控组件，它总会显示 Vue 绑定值。
通常情况下，应当处理 input 事件，并更新组件的绑定值（或使用v-model）。否则，输入框内显示的值将不会改变。
不支持 v-model 修饰符。
基础用法

禁用状态

可清空

密码框

带 icon 的输入框

  属性方式：
  
  
  
  


  slot 方式：
  
    
  
  
    
  

文本域

可自适应文本高度的文本域
通过设置 autosize 属性可以使得文本域的高度能够根据文本内容自动进行调整，并且 autosize 还可以设定为一个对象，指定最小行数和最大行数。

复合型输入框

尺寸

带输入建议

  
    
激活即列出输入建议
    
  
  
    
输入后匹配输入建议
    
  

自定义模板

远程搜索

输入长度限制

InputNumber 计数器仅允许输入标准的数字值，可定义范围
基础用法

禁用状态

步数 允许定义递增递减的步数控制

严格步数

精度
设置 precision 属性可以控制数值精度，接收一个 Number。
precision 的值必须是一个非负整数，并且不能小于 step 的小数位数。

template>
  

尺寸
额外提供了 medium、small、mini 三种尺寸的数字输入框

按钮位置
设置 controls-position 属性可以控制按钮位置。

Select 选择器当选项过多时，使用下拉菜单展示并选择内容。
基础用法
适用广泛的基础单选

有禁用选项
在el-option中，设定disabled值为 true，即可禁用该选项

禁用状态
为el-select设置disabled属性，则整个选择器不可用

可清空单选
为el-select设置clearable属性，则可将选择器清空。需要注意的是，clearable属性仅适用于单选。

基础多选
为el-select设置multiple属性即可启用多选，此时v-model的值为当前选中值所组成的数组。默认情况下选中值会以 Tag 的形式展现，你也可以设置collapse-tags属性将它们合并为一段文字。

自定义模板
将自定义的 HTML 模板插入el-option的 slot 中即可。

分组
使用el-option-group对备选项进行分组，它的label属性为分组名

可搜索
为el-select添加filterable属性即可启用搜索功能。默认情况下，Select 会找出所有label属性包含输入值的选项。如果希望使用其他的搜索逻辑，可以通过传入一个filter-method来实现。filter-method为一个Function，它会在输入值发生变化时调用，参数为当前输入值。

远程搜索
从服务器搜索数据，输入关键字进行查找
为了启用远程搜索，需要将filterable和remote设置为true，同时传入一个remote-method。remote-method为一个Function，它会在输入值发生变化时调用，参数为当前输入值。需要注意的是，如果el-option是通过v-for指令渲染出来的，此时需要为el-option添加key属性，且其值需具有唯一性，比如此例中的item.value。

创建条目
可以创建并选中选项中不存在的条目
使用allow-create属性即可通过在输入框中输入文字来创建新的条目。注意此时filterable必须为真。本例还使用了default-first-option属性，在该属性打开的情况下，按下回车就可以选中当前选项列表中的第一个选项，无需使用鼠标或键盘方向键进行定位。
如果 Select 的绑定值为对象类型，请务必指定 value-key 作为它的唯一性标识。

Cascader 级联选择器
当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择。
基础用法
只需为 Cascader 的options属性指定选项数组即可渲染出一个级联选择器。通过 props.expandTrigger可以定义展开子级菜单的触发方式。

  默认 click 触发子菜单
  


  hover 触发子菜单
  

禁用选项
通过在数据源中设置 disabled 字段来声明该选项是禁用的
本例中，options指定的数组中的第一个元素含有disabled: true键值对，因此是禁用的。在默认情况下，Cascader 会检查数据中每一项的disabled字段是否为true，如果你的数据中表示禁用含义的字段名不为disabled，可以通过props.disabled属性来指定（详见下方 API 表格）。当然，value、label和children这三个字段名也可以通过同样的方式指定。

可清空
通过 clearable 设置输入框可清空

仅显示最后一级
可以仅在输入框中显示选中项最后一级的标签，而不是选中项所在的完整路径。
属性show-all-levels定义了是否显示完整的路径，将其赋值为false则仅显示最后一级

多选
可通过 props.multiple = true 来开启多选模式
在开启多选模式后，默认情况下会展示所有已选中的选项的Tag，你可以使用collapse-tags来折叠Tag

div class="block">
  默认显示所有Tag
  

折叠展示Tag

选择任意一级选项
在单选模式下，你只能选择叶子节点；而在多选模式下，勾选父节点真正选中的都是叶子节点。启用该功能后，可让父子节点取消关联，选择任意一级选项。
可通过 props.checkStrictly = true 来设置父子节点取消选中关联，从而达到选择任意一级选项的目的。

  单选选择任意一级选项
  


  多选选择任意一级选项
  

动态加载
当选中某一级时，动态加载该级下的选项

可搜索
可以快捷地搜索选项并选择。

  单选可搜索
  


  多选可搜索
  

自定义节点内容
可以自定义备选项的节点内容
可以通过scoped slot对级联选择器的备选项的节点内容进行自定义，scoped slot会传入两个字段 node 和 data，分别表示当前节点的 Node 对象和数据。

级联面板
级联面板是级联选择器的核心组件，与级联选择器一样，有单选、多选、动态加载等多种功能。
和级联选择器一样，通过options来指定选项，也可通过props来设置多选、动态加载等功能，具体详情见下方API表格

Switch 开关
表示两种相互对立的状态间的切换，多用于触发「开/关」。
基本用法

文字描述
使用active-text属性与inactive-text属性来设置开关的文字描述。

扩展的 value 类型
设置active-value和inactive-value属性，接受Boolean, String或Number类型的值。

禁用状态

Slider 滑块
通过拖动滑块在一个固定区间内进行选择
基础用法
在拖动滑块时，显示当前值
通过设置绑定值自定义滑块的初始值

离散值
选项可以是离散的
改变step的值可以改变步长，通过设置show-stops属性可以显示间断点

带有输入框
通过输入框设置精确数值
设置show-input属性会在右侧显示一个输入框

范围选择
支持选择某一数值范围
设置range即可开启范围选择，此时绑定值是一个数组，其元素分别为最小边界值和最大边界值

竖向模式
设置vertical可使 Slider 变成竖向模式，此时必须设置高度height属性

展示标记
设置 marks 属性可以展示标记

TimePicker 时间选择器
用于选择或输入日期
固定时间点
提供几个固定的时间点供用户选择
使用 el-time-select 标签，分别通过star、end和step指定可选的起始时间、结束时间和步长

任意时间点
可以选择任意时间
使用 el-time-picker 标签，通过selectableRange限制可选时间范围。提供了两种交互方式：默认情况下通过鼠标滚轮进行选择，打开arrow-control属性则通过界面上的箭头进行选择。

固定时间范围
若先选择开始时间，则结束时间内备选项的状态会随之改变

任意时间范围
可选择任意的时间范围
添加is-range属性即可选择时间范围，同样支持arrow-control属性。

DatePicker 日期选择器
用于选择或输入日期
选择日
以「日」为基本单位，基础的日期选择控件
基本单位由type属性指定。快捷选项需配置picker-options对象中的shortcuts，禁用日期通过 disabledDate 设置，传入函数

其他日期单位
通过扩展基础的日期选择，可以选择周、月、年或多个日期

  

    周
    
    
  
  

    月
    
    
  


  

    年
    
    
  
  

    多个日期
    
    
  

选择日期范围
可在一个选择器中便捷地选择一个时间范围
在选择日期范围时，默认情况下左右面板会联动。如果希望两个面板各自独立切换当前月份，可以使用unlink-panels属性解除联动。

选择月份范围
可在一个选择器中便捷地选择一个月份范围
在选择月份范围时，默认情况下左右面板会联动。如果希望两个面板各自独立切换当前年份，可以使用unlink-panels属性解除联动。

日期格式
使用format指定输入框的格式；使用value-format指定绑定值的格式。

默认情况下，组件接受并返回Date对象。以下为可用的格式化字串，以 UTC 2017年1月2日 03:04:05 为例：
请注意大小写

在这里插入代码片

默认显示日期
在选择日期范围时，指定起始日期和结束日期的默认时刻

DateTimePicker 日期时间选择器
在同一个选择器里选择日期和时间
DateTimePicker 由 DatePicker 和 TimePicker 派生，Picker Options 或者其他选项可以参照 DatePicker 和 TimePicker。
日期和时间点
通过设置type属性为datetime，即可在同一个选择器里同时进行日期和时间的选择。快捷选项的使用方法与 Date Picker 相同。

日期和时间范围
设置type为datetimerange即可选择日期和时间范

默认的起始与结束时刻
使用datetimerange进行范围选择时，在日期选择面板中选定起始与结束的日期，默认会使用该日期的00:00:00作为起始与结束的时刻；通过选项default-time可以控制选中起始与结束日期时所使用的具体时刻。default-time接受一个数组，数组每项值为字符串，形如12:00:00，其中第一项控制起始日期的具体时刻，第二项控制结束日期的具体时刻。

Upload 上传
通过点击或者拖拽上传文件
点击上传
通过 slot 你可以传入自定义的上传按钮类型和文字提示。可通过设置limit和on-exceed来限制上传文件的个数和定义超出限制时的行为。可通过设置before-remove来阻止文件移除操作。

  点击上传
  
只能上传jpg/png文件，且不超过500kb

用户头像上传
使用 before-upload 限制用户上传的图片格式和大小。

照片墙
使用 list-type 属性来设置文件列表的样式。

文件缩略图
使用 scoped-slot 去设置缩略图模版。

图片列表缩略图

  点击上传
  
只能上传jpg/png文件，且不超过500kb

上传文件列表控制
通过 on-change 钩子函数来对列表进行控制

  点击上传
  
只能上传jpg/png文件，且不超过500kb

拖拽上传

  
  
将文件拖到此处，或点击上传
  
只能上传jpg/png文件，且不超过500kb

手动上传

  选取文件
  上传到服务器
  
只能上传jpg/png文件，且不超过500kb

Rate 评分
评分组件
基础用法
评分默认被分为三个等级，可以利用颜色数组对分数及情感倾向进行分级（默认情况下不区分颜色）。三个等级所对应的颜色用colors属性设置，而它们对应的两个阈值则通过 low-threshold 和 high-threshold 设定。你也可以通过传入颜色对象来自定义分段，键名为分段的界限值，键值为对应的颜色。

  默认不区分颜色
  


  区分颜色
  
  

辅助文字
用辅助文字直接地表达对应分数
为组件设置 show-text 属性会在右侧显示辅助文字。通过设置 texts 可以为每一个分值指定对应的辅助文字。texts 为一个数组，长度应等于最大值 max。

其它 icon
当有多层评价时，可以用不同类型的 icon 区分评分层级
设置icon-classes属性可以自定义不同分段的图标。若传入数组，共有 3 个元素，为 3 个分段所对应的类名；若传入对象，可自定义分段，键名为分段的界限值，键值为对应的类名。本例还使用void-icon-class指定了未选中时的图标类名。

只读
只读的评分用来展示分数，允许出现半星

为组件设置 disabled 属性表示组件为只读，支持小数分值。此时若设置 show-score，则会在右侧显示目前的分值。可以提供 score-template 作为显示模板，模板为一个包含了 {value} 的字符串，{value} 会被解析为分值。

ColorPicker 颜色选择器
用于颜色选择，支持多种格式。
基础用法
使用 v-model 与 Vue 实例中的一个变量进行双向绑定，绑定的变量需要是字符串类型。

  有默认值
  


  无默认值
  

选择透明度
ColorPicker 支持普通颜色，也支持带 Alpha 通道的颜色，通过show-alpha属性即可控制是否支持透明度的选择。

预定义颜色
ColorPicker 支持预定义颜色

l-color-picker
  v-model="color"
  show-alpha
  :predefine="predefineColors">

不同尺寸

Transfer 穿梭框
基础用法
Transfer 的数据通过 data 属性传入。数据需要是一个对象数组，每个对象有以下属性：key 为数据的唯一性标识，label 为显示文本，disabled 表示该项数据是否禁止转移。目标列表中的数据项会同步到绑定至 v-model 的变量，值为数据项的 key 所组成的数组。当然，如果希望在初始状态时目标列表不为空，可以像本例一样为 v-model 绑定的变量赋予一个初始值。

可搜索
在数据很多的情况下，可以对数据进行搜索和过滤。

¶ Transfer 穿梭框
¶ 基础用法

Transfer 的数据通过 data 属性传入。数据需要是一个对象数组，每个对象有以下属性：key 为数据的唯一性标识，label 为显示文本，disabled 表示该项数据是否禁止转移。目标列表中的数据项会同步到绑定至 v-model 的变量，值为数据项的 key 所组成的数组。当然，如果希望在初始状态时目标列表不为空，可以像本例一样为 v-model 绑定的变量赋予一个初始值。

¶ 可搜索
在数据很多的情况下，可以对数据进行搜索和过滤。

请输入城市拼音

请输入城市拼音
无数据

设置 filterable 为 true 即可开启搜索模式。默认情况下，若数据项的 label 属性包含搜索关键字，则会在搜索结果中显示。你也可以使用 filter-method 定义自己的搜索逻辑。filter-method 接收一个方法，当搜索关键字变化时，会将当前的关键字和每个数据项传给该方法。若方法返回 true，则会在搜索结果中显示对应的数据项。

可自定义
可以对列表标题文案、按钮文案、数据项的渲染函数、列表底部的勾选状态文案、列表底部的内容区等进行自定义。

可以使用 titles、button-texts、render-content 和 format 属性分别对列表标题文案、按钮文案、数据项的渲染函数和列表顶部的勾选状态文案进行自定义。数据项的渲染还可以使用 scoped-slot 进行自定义。对于列表底部的内容区，提供了两个具名 slot：left-footer 和 right-footer。此外，如果希望某些数据项在初始化时就被勾选，可以使用 left-default-checked 和 right-default-checked 属性。最后，本例还展示了 change 事件的用法。注意：由于 jsfiddle 不支持 JSX 语法，所以使用 render-content 自定义数据项的例子在 jsfiddle 中无法运行。但是在实际的项目中，只要正确地配置了相关依赖，就可以正常运行。

数据项属性别名
默认情况下，Transfer 仅能识别数据项中的 key、label 和 disabled 字段。如果你的数据的字段名不同，可以使用 props 属性为它们设置别名。
本例中的数据源没有 key 和 label 字段，在功能上与它们相同的字段名为 value 和 desc。因此可以使用props 属性为 key 和 label 设置别名。

Form 表单
由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据

典型表单
包括各种表单项，比如输入框、选择器、开关、单选框、多选框等。
在 Form 组件中，每一个表单域由一个 Form-Item 组件构成，表单域中可以放置各种类型的表单控件，包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker

  
    
  
  
    
      
      
    
  
  
    
      
    
    -
    
      
    
  
  
    
  
  
    
      
      
      
      
    
  
  
    
      
      
    
  
  
    
  
  
    立即创建
    取消
  

行内表单
当垂直方向空间受限且表单较简单时，可以在一行内放置表单。
设置 inline 属性可以让表单域变为行内的表单域

  
    
  
  
    
      
      
    
  
  
    查询
  

对齐方式
根据具体目标和制约因素，选择最佳的标签对齐方式。
通过设置 label-position 属性可以改变表单域标签的位置，可选值为 top、left，当设为 top 时标签会置于表单域的顶部

  左对齐
  右对齐
  顶部对齐



  
    
  
  
    
  
  
    
  

表单验证
在防止用户犯错的前提下，尽可能让用户更早地发现并纠正错误。
Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。校验规则参见 async-validator

  
    
  
  
    
      
      
    
  
  
    
      
        
      
    
    -
    
      
        
      
    
  
  
    
  
  
    
      
      
      
      
    
  
  
    
      
      
    
  
  
    
  
  
    立即创建
    重置
  

自定义校验规则
这个例子中展示了如何使用自定义验证规则来完成密码的二次验证
本例还使用status-icon属性为输入框添加了表示校验结果的反馈图标

  
    
  
  
    
  
  
    
  
  
    提交
    重置
  

自定义校验 callback 必须被调用。 更多高级用法可参考 async-validator。
动态增减表单项
除了在 Form 组件上一次性传递所有的验证规则外还可以在单个的表单域上传递属性的验证规则

  
    
  
  
    删除
  
  
    提交
    新增域名
    重置
  

数字类型验证
数字类型的验证需要在 v-model 处加上 .number 的修饰符，这是 Vue 自身提供的用于将绑定值转化为 number 类型的修饰符。

  
    
  
  
    提交
    重置
  

嵌套在 el-form-item 中的 el-form-item 标签宽度默认为零，不会继承 el-form 的 label-width。如果需要可以为其单独设置 label-width 属性。

表单内组件尺寸控制
通过设置 Form 上的 size 属性可以使该表单内所有可调节大小的组件继承该尺寸。Form-Item 也具有该属性。
如果希望某个表单项或某个表单组件的尺寸不同于 Form 上的size属性，直接为这个表单项或表单组件设置自己的size即可

  
    
  
  
    
      
      
    
  
  
    
      
    
    -
    
      
    
  
  
    
      
      
      
    
  
  
    
      
      
    
  
  
    立即创建
    取消