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.$refs.frm01.validate(function(validate)//参数：validate-返回所有表单元素验证的结果//validate返回true，所有表单元素通过了验证//validate返回false，有表单元素未通过验证if(validate)console.log(‘数据提交’);)（4）<el-form>的status-icon属性：是否在未通过验证时显示提示图标。5、表单数据重置：this.$refs.frm01.resetFields();
五、单选框：
、、
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、使用模板：

{{item.label}}

{{item.description}}

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属性的变化。
<el-pagination @size-change=“sizeChange”>
sizeChange(size){ //size-每页所显示的数据个数 }
12、current-change事件：当current-page属性发生变化时触发该
事件。
当用户单击任意页码或实现页面跳转时会触发current-page属性的变化。
<el-pagination @current-change=“currentChange”>
currentChange(current){
// current - 所改变的当前页
}
13、prev-click事件：参数为当前页码。
14、next-click事件：参数为当前页码。
例：对数据进行分页显示。

十二、Notice通知类组件（1）：弹框
1、全局函数：
this.$alert(message,title,options).then()this.$confirm(message,title,options).then().catch()
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.$confirm(‘你确定删除此名学生吗？’,’删除提示’,type:‘warning’,cancelButtonText:‘不删除’).then(()=>console.log(‘删除成功’);).catch(()=>console.log(‘删除失败’);)十三、Notice通知类组件（2）：消息提示1、格式：this.$message(message)
格式：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.$message.success()this.$message.warning()
this.$message.error()十四、Others其他组件：对话框<el-dialog></el-dialog>1、如何让对话框显示：使用visible属性。<el-dialog:visible.sync=“isShow”></el-dialog>2、如何在对话框中设置按钮：在<el-dialog>标记对内部使用名为footer的插槽。<el-dialog><templateslot=“footer”><el-buttontype=“primary”>确定</el-button></template></el-dialog>3、对话框的属性：（1）width：设置对话框的宽度。（50（2）top：设置对话框相对于顶部的距离。（3）modal：设置对话框是否具备遮罩层。modal（模态窗：不关闭此窗口后续操作无法进行）model（模型）（4）close-on-click-modal：设置是否允许单击遮罩层来关闭对话框。（5）lock-scroll：设置是否在对话框出现时锁定body滚动条。（6）close-on-press-escape：设置是否允许单击ESC键关闭对话框。（7）show-close：是否显示关闭（8）center：是否居中显示。（9）fullscreen：是否全屏显示。（10）modal-append-to-body：遮罩层是否加入body。（11）append-to-body：对话框是否加入body。总结：为项目进行信息提示的组件。（1）MessageBox（弹框）：this.$alert()、this.$confirm()、this.$prompt()
在页面中对用户的操作结果进行提示、询问。
（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的插槽

子菜单标题

……