element ui form用法

Form

Form 表单

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

行内表单

当垂直方向空间受限且表单较简单时，可以在一行内放置表单。

对齐方式

根据具体目标和制约因素，选择最佳的标签对齐方式。

表单验证

在防止用户犯错的前提下，尽可能让用户更早地发现并纠正错误。

自定义校验规则

这个例子中展示了如何使用自定义验证规则来完成密码的二次验证。

Radio 单选框

在一组备选项中进行单选

¶基础用法

由于选项默认可见，不宜过多，若选项过多，建议使用 Select 选择器。

​

禁用状态

单选框不可用的状态。

只要在el-radio元素中设置disabled属性即可，它接受一个Boolean，true为禁用。

 备选项

单选框组

适用于在多个互斥的选项中选择的场景

结合el-radio-group元素和子元素el-radio可以实现单选组，在el-radio-group中绑定v-model，在el-radio中设置好label即可，无需再给每一个el-radio绑定变量，另外，还提供了change事件来响应变化，它会传入一个参数value。

​

Checkbox 多选框

一组备选项中进行多选

¶基础用法

单独使用可以表示两种状态之间的切换，写在标签中的内容为 checkbox 按钮后的介绍。

在el-checkbox元素中定义v-model绑定变量，单一的checkbox中，默认绑定变量的值会是Boolean，选中为true。

禁用状态

多选框不可用状态。

设置disabled属性即可。

多选框组

适用于多个勾选框绑定到同一个数组的情景，通过是否勾选来表示这一组选项中选中的项。

checkbox-group元素能把多个 checkbox 管理为一组，只需要在 Group 中使用v-model绑定Array类型的变量即可。 el-checkbox 的 label属性是该 checkbox 对应的值，若该标签中无内容，则该属性也充当 checkbox 按钮后的介绍。label与数组中的元素值相对应，如果存在指定的值则为选中状态，否则为不选中。

​

indeterminate 状态

indeterminate 属性用以表示 checkbox 的不确定状态，一般用于实现全选的效果

可选项目数量的限制

使用 min 和 max 属性能够限制可以被勾选的项目的数量。

Input 输入框

通过鼠标或键盘输入字符

Input 为受控组件，它总会显示 Vue 绑定值。

通常情况下，应当处理 input 事件，并更新组件的绑定值（或使用v-model）。否则，输入框内显示的值将不会改变。

不支持 v-model 修饰符。

基础用法

​

文本域

用于输入多行文本信息，通过将 type 属性的值指定为 textarea。

文本域高度可通过 rows 属性控制

可自适应文本高度的文本域

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

带输入建议

根据输入内容提供对应的输入建议

autocomplete 是一个可带输入建议的输入框组件，fetch-suggestions 是一个返回输入建议的方法属性，如 querySearch(queryString, cb)，在该方法中你可以在你的输入建议数据准备好时通过 cb(data) 返回到 autocomplete 组件中。

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

自定义模板

可自定义输入建议的显示

使用scoped slot自定义输入建议的模板。该 scope 的参数为item，表示当前输入建议对象。

远程搜索

从服务端搜索数据

输入长度限制

maxlength 和 minlength 是原生属性，用来限制输入框的字符长度，其中字符长度是用 Javascript 的字符串长度统计的。对于类型为 text 或 textarea 的输入框，在使用 maxlength 属性限制最大输入长度的同时，可通过设置 show-word-limit 属性来展示字数统计。