Element-UI中的Form 表单组件
v-model：用来为表单元素双向绑定数据。
disabled：表单元素禁用。
readOnly：表单元素只读。
hidden：表单元素隐藏。
一、输入框：
1、clearable：输入框是否具备可清除功能。
2、show-password：输入框是否表现为密码输入。
3、prefix-icon：设置输入框左侧的图标。
suffix-icon：设置输入框右侧的图标。
4、type=“textarea”：输入框表现为多行文本域。
rows：设置多行文本域显示的行数。
autosize：设置多行文本域是否自动随着内容的增多而增大。
取值：（1）逻辑值。此时rows无效。
（2）对象。 :autosize=“{minRows:5,maxRows:10}”
5、复合型输入框：
（1）prepend插槽：为输入框设置左侧的附加内容。
（2）append插槽：为输入框设置右侧的附加内容。
6、minlength：最小字符个数。
maxlength：最大字符个数。
show-word-limit：是否显示字数统计。
二、带有输入建议的输入框：
标记对。
1、fetch-suggestions：为输入框提供建议数据。
取值为函数：
query(queryString,cb){
//queryString - 用户输入的内容
//cb - 回调函数，用于返回建议数据
}
例：query(queryString,cb){ cb(this.数据区的数据); }
数据区的数据必须是数组，数组元素必须是对象，对象必须
具备value属性。
例：建议只展示用户输入内容相关的建议项。
query(queryString,cb){
let a=this.suggestion.filter(item=>{
return item.value.indexOf(queryString)!=-1;
});
cb(queryString?a:this.suggestion);
}
2、trigger-on-focus：建议项是否当获得焦点时触发。
默认值：true - 当获得焦点时触发建议项。
false - 当输入文本时触发建议项。
3、可以在标记对内部使用作用域插槽。
{{item.value}} - {{item.address}}
三、计数器：
1、controls：是否显示控制按钮。
2、controls-position：设置控制按钮的位置。（取值：left、right）
3、step-strictly：设置是否只能输入步长值的倍数。
四、表单：
标记对：、
1、表单元素的放置：书写在内部，表单元素
书写在内部。
2、表单元素的标签：
（1）的label属性：为表单元素设置标签内容。
（2）的label-width属性：设置标签文本所占的宽度。
（3）的label-suffix属性：设置标签文本的后缀内容。
3、表单数据的绑定：
（1）的model属性：设置数据区中的对象型数据为整个
表单所绑定的数据。
（2）使用每一个表单元素的v-model属性设置为的
model属性绑定的数据成员。
4、表单数据的验证：
（1）的rules属性：为表单设置验证规则和违反验证的
提示语以及验证的事件机制。
rules:{
nick:[
{required:true,message:‘昵称不得为空’,trigger:‘blur’}
],
pwd:[
{required:true,message:‘密码不得为空’,trigger:‘blur’}
]
}
（2）使用标记对的prop属性为表单元素指定验证
规则。取值必须为rules对象的已有键名。
（3）单击提交按钮时如何验证表单元素的正确性？
使用表单的方法：validate(callback)
this. r e f s . f r m 01. v a l i d a t e ( f u n c t i o n ( v a l i d a t e ) / / 参 数 ： v a l i d a t e − 返 回 所 有 表 单 元 素 验 证 的 结 果 / / v a l i d a t e 返 回 t r u e ， 所 有 表 单 元 素 通 过 了 验 证 / / v a l i d a t e 返 回 f a l s e ， 有 表 单 元 素 未 通 过 验 证 i f ( v a l i d a t e ) c o n s o l e . l o g ( ‘ 数 据 提 交 ’ ) ; ) （ 4 ） < e l − f o r m > 的 s t a t u s − i c o n 属 性 ： 是 否 在 未 通 过 验 证 时 显 示 提 示 图 标 。 5 、 表 单 数 据 重 置 ： t h i s . refs.frm01.validate(function(validate){ //参数：validate - 返回所有表单元素验证的结果 // validate返回true，所有表单元素通过了验证 // validate返回false，有表单元素未通过验证 if(validate){ console.log(‘数据提交’); } }) （4）
五、单选框：
、、
1、label：设置单选框被选中后的取值。
2、v-model：
（1）多个v-model绑定相同变量的单选框时互斥的。
（2）v-model绑定的变量的取值是被选中的单选框的label取值。
3、border：设置是否显示边框。
4、：按钮式单选框。
5、：单选框组，内部包含若干个、，被包含的单选框之间是互斥的。
v-model：为整个单选框组绑定变量。
六、复选框：
、、
单个复选框绑定的变量取值为逻辑值。
多个复选框绑定的变量取值为数组。
1、的属性：
（1）text-color：设置被选中时的文本颜色。
（2）fill：设置被选中时的填充颜色。
（3）min：允许被选中的最少个数。
（4）max：允许被选中的最多个数。
2、的属性：
（1）label属性：设置被选中时的取值。
（2）indeterminate属性：将复选框设置为未被全选但若干被选中
的中间状态。
3、的事件：change事件，当复选框的状态法发生变化
时触发。
例：制作一个全选功能的复选框。
七、选择器：
、、
1、如何使用选择器组件：
（1）为组件使用v-model绑定一个变量。
（2）设置一个变量用于遍历。
optionData:[
{ label:‘设置文本内容’,value:‘设置被选中时的取值’ }
]
2、使用模板：
3、多选：
（1）标记对的multiple属性。
（2）标记对的multiple-limit属性：设置最多能够被选中
的项目。
（3）标记对的collapse-tags属性：设置被选中项在选择
器中是否展示为个数。
4、可搜索：filterable。默认情况下筛选与用户输入相关的value取值
的选项。
filter-method属性：绑定一个函数，设置自定义筛选条件。
5、标记对的allow-create属性：
（1）功能：是否允许将用户自定义输入的内容创建为一项。
（2）该功能必须保证具备filterable时才可生效。
6、的label属性：设置分组名称。
八、级联选择器：
、
1、options：为级联选择器绑定数据。
数据的取值为数组，数组元素为对象：{label,value,children}
2、show-all-levels：设置最终的结果是否显示所有层。
3、props:{}
（1）checkStrictly：是否让父子关系的节点取消关联。
（2）multiple：是否允许多选。
4、可搜索：filterable
九、开关：
1、active-color、inactive-color：设置两个状态的颜色。
2、active-text、inactive-text：设置两个状态的文本。
3、active-icon-class、inactive-icon-class：
4、active-value、inactive-value：
5、width：设置开关的宽度（默认值为40px）。
十、滑块：
1、min、max、step、v-model。
2、show-tooltip：是否显示提示文本。
3、show-stops：是否显示间断点。
4、show-input：是否显示数字框。
5、show-input-controls：是否显示数字框的控制按钮。
6、range：开启范围选择，此时绑定的变量变成一个数组。
7、vertical：开启垂直模式。
height：设置垂直模式下的滑块高度。
8、marks：展示特殊标记点。
marks:{
3:‘3°C’,
11:{
style:{color:’#ff5857’},
label:this.$createElement(‘strong’,‘11°C’)
},
16:‘16°C’
}
十一、分页组件：
1、total：设置分页数据的总个数。
2、page-size：设置每页的数据个数。（默认值：10）
3、page-count：设置分页的页数。
设置分页可以有两种方案：
（1）设置total和page-size。
（2）设置page-size和page-count。
4、pager-count：设置可显示的最大页码个数（7）。
5、prev-text：前一项替代文本。
next-text：后一项替代文本。
6、background：设置页码是否带有背景。
7、hide-on-single-page：设置是否只有一页时隐藏分页组件。
8、current-page：设置当前页（1）。
9、small：设置分页组件为小型外观。
10、layout：设置分页组件各个分量的显示外观。
取值：下列单词任意搭配的字符串，单词之间用逗号隔开。
sizes（每页多少条数据计数器）、
prev（上一页）、pager（页码）、next（下一页）、
jumper（跳转页）、
->（书写在该符号后面的内容右对齐）
total（总共多少条数据）。
11、size-change事件：当page-size属性发生变化时触发该事件。
当用户在每页多少条数据计数器中进行修改时触发page-size属性的变化。
sizeChange(size){ //size-每页所显示的数据个数 }
12、current-change事件：当current-page属性发生变化时触发该
事件。
当用户单击任意页码或实现页面跳转时会触发current-page属性的变化。
currentChange(current){
// current - 所改变的当前页
}
13、prev-click事件：参数为当前页码。
14、next-click事件：参数为当前页码。
例：对数据进行分页显示。
十二、Notice通知类组件（1）：弹框
1、全局函数：
this. a l e r t ( m e s s a g e , t i t l e , o p t i o n s ) . t h e n ( ) t h i s . alert(message,title,options).then() this. alert(message,title,options).then()this.confirm(message,title,options).then().catch()
this. p r o m p t ( m e s s a g e , t i t l e , o p t i o n s ) . t h e n ( ) t h i s . prompt(message,title,options).then() this. prompt(message,title,options).then()this.msgbox(options)
2、options选项：
（1）type：设置图表类型（success、info、warning、error）
（2）showClose：是否显示关闭按钮。
（3）lockScroll：设置当弹框出现时是否锁定页面的垂直滚动条。
（4）showCancelButton
cancelButtonText
cancelButtonClass
（5）showConfirmButton
confirmButtonText
confirmButtonClass
（6）showInput
inputPlaceholder
inputType
inputValue
inputPattern
inputErrorMessage
inputValidator
（7）center：居中显示
（8）roundButton：圆角按钮。
（9）dangerouslyUseHTMLString：是否支持HTML片段。
（10）iconClass：设置自定义图标。
例：删除提示。
this. c o n f i r m ( ‘ 你 确 定 删 除 此 名 学 生 吗 ？ ’ , ’ 删 除 提 示 ’ , t y p e : ‘ w a r n i n g ’ , c a n c e l B u t t o n T e x t : ‘ 不 删 除 ’ ) . t h e n ( ( ) = > c o n s o l e . l o g ( ‘ 删 除 成 功 ’ ) ; ) . c a t c h ( ( ) = > c o n s o l e . l o g ( ‘ 删 除 失 败 ’ ) ; ) 十 三 、 N o t i c e 通 知 类 组 件 （ 2 ） ： 消 息 提 示 1 、 格 式 ： t h i s . confirm(‘你确定删除此名学生吗？’,’删除提示’,{ type:‘warning’, cancelButtonText:‘不删除’ }).then(()=>{ console.log(‘删除成功’); }).catch(()=>{ console.log(‘删除失败’); }) 十三、Notice通知类组件（2）：消息提示 1、格式：this. confirm(‘你确定删除此名学生吗？’,’删除提示’,type:‘warning’,cancelButtonText:‘不删除’).then(()=>console.log(‘删除成功’);).catch(()=>console.log(‘删除失败’);)十三、Notice通知类组件（2）：消息提示1、格式：this.message(message)
格式：this. m e s s a g e ( o p t i o n s ) 2 、 o p t i o n s 选 项 ： （ 1 ） m e s s a g e ： 消 息 提 示 的 文 本 内 容 。 （ 2 ） t y p e ： 类 型 ， 默 认 值 i n f o 。 取 值 ： s u c c e s s 、 w a r n i n g 、 e r r o r （ 3 ） s h o w C l o s e ： 是 否 显 示 关 闭 。 （ 4 ） c e n t e r ： 是 否 居 中 显 示 。 （ 5 ） d u r a t i o n ： 消 息 提 示 出 现 的 时 间 ， 单 位 毫 秒 （ 3000 ） （ 6 ） o f f s e t ： 设 置 消 息 提 示 的 顶 部 偏 移 距 离 ， 取 值 不 带 单 位 。 （ 20 ） 3 、 t h i s . message(options) 2、options选项： （1）message：消息提示的文本内容。 （2）type：类型，默认值info。取值：success、warning、error （3）showClose：是否显示关闭。 （4）center：是否居中显示。 （5）duration：消息提示出现的时间，单位毫秒（3000） （6）offset：设置消息提示的顶部偏移距离，取值不带单位。（20） 3、this. message(options)2、options选项：（1）message：消息提示的文本内容。（2）type：类型，默认值info。取值：success、warning、error（3）showClose：是否显示关闭。（4）center：是否居中显示。（5）duration：消息提示出现的时间，单位毫秒（3000）（6）offset：设置消息提示的顶部偏移距离，取值不带单位。（20）3、this.message.info()
this. m e s s a g e . s u c c e s s ( ) t h i s . message.success() this. message.success()this.message.warning()
this. m e s s a g e . e r r o r ( ) 十 四 、 O t h e r s 其 他 组 件 ： 对 话 框 < e l − d i a l o g > < / e l − d i a l o g > 1 、 如 何 让 对 话 框 显 示 ： 使 用 v i s i b l e 属 性 。 < e l − d i a l o g : v i s i b l e . s y n c = “ i s S h o w ” > < / e l − d i a l o g > 2 、 如 何 在 对 话 框 中 设 置 按 钮 ： 在 < e l − d i a l o g > 标 记 对 内 部 使 用 名 为 f o o t e r 的 插 槽 。 < e l − d i a l o g > < t e m p l a t e s l o t = “ f o o t e r ” > < e l − b u t t o n t y p e = “ p r i m a r y ” > 确 定 < / e l − b u t t o n > < / t e m p l a t e > < / e l − d i a l o g > 3 、 对 话 框 的 属 性 ： （ 1 ） w i d t h ： 设 置 对 话 框 的 宽 度 。 （ 50 （ 2 ） t o p ： 设 置 对 话 框 相 对 于 顶 部 的 距 离 。 （ 3 ） m o d a l ： 设 置 对 话 框 是 否 具 备 遮 罩 层 。 m o d a l （ 模 态 窗 ： 不 关 闭 此 窗 口 后 续 操 作 无 法 进 行 ） m o d e l （ 模 型 ） （ 4 ） c l o s e − o n − c l i c k − m o d a l ： 设 置 是 否 允 许 单 击 遮 罩 层 来 关 闭 对 话 框 。 （ 5 ） l o c k − s c r o l l ： 设 置 是 否 在 对 话 框 出 现 时 锁 定 b o d y 滚 动 条 。 （ 6 ） c l o s e − o n − p r e s s − e s c a p e ： 设 置 是 否 允 许 单 击 E S C 键 关 闭 对 话 框 。 （ 7 ） s h o w − c l o s e ： 是 否 显 示 关 闭 （ 8 ） c e n t e r ： 是 否 居 中 显 示 。 （ 9 ） f u l l s c r e e n ： 是 否 全 屏 显 示 。 （ 10 ） m o d a l − a p p e n d − t o − b o d y ： 遮 罩 层 是 否 加 入 b o d y 。 （ 11 ） a p p e n d − t o − b o d y ： 对 话 框 是 否 加 入 b o d y 。 总 结 ： 为 项 目 进 行 信 息 提 示 的 组 件 。 （ 1 ） M e s s a g e B o x （ 弹 框 ） ： t h i s . message.error() 十四、Others其他组件：对话框
在页面中对用户的操作结果进行提示、询问。
（2）Message（消息提示）：this.$message()
提示弹框之后的操作。
（3）Dialog（对话框）：
在页面内实现表单操作（数据的增加和修改）
十五、Navigation导航组件：步骤条
、
1、的属性：
（1）active：设置当前的步骤项，取值为步骤项的索引值。（0）
（2）process-status：当前步骤项的状态外观。（process）
finish-status：已完成步骤项的状态外观。（finish）
取值：wait、process、finish、error、success。
（3）align-center：设置步骤项中的标题和描述是否居中。
（4）direction：设置步骤条的方向，取值为horizontal、vertical。
（5）simple：是否设置为简洁模式。
2、的属性：
（1）title：步骤项的标题。
（2）description：步骤项的描述信息。
（3）icon：图标。
（4）status：步骤项的状态外观。
十六、Navigation导航组件：导航菜单
、、
1、的属性：
（1）background-color：菜单的背景颜色。
text-color：菜单的文本颜色。
（2）unique-opened：设置是否多个子菜单只能有一个保持展开
状态（false）。
（3）router：设置是否启用路由模式。
路由模式：在菜单项中的index属性必须取值为路由地址。
（4）mode：设置导航菜单模式。
取值：horizontal、vertical（默认值）。
（5）active-text-color：设置当前菜单项的文本颜色。
（6）default-active：设置当前被激活的菜单项，取值为菜单
项index属性的取值。
（7）collapse：是否水平折叠收起菜单。
（8）collapse-transition：是否开启折叠动画。
2、和的属性：
index：各个菜单项取值不能相同。开启路由模式后，的index取值必须为路由地址。
3、为子菜单设置标题：使用名为title的插槽
子菜单标题
……