element-ui的简单笔记
关注一下公众号：内有相关文章！！
八、Form相关组件
8.1 Radio单选按钮
1.创建Radio按钮
男
女
注意:在使用radio单选按钮是至少加入v-model和label两个属性
2.Radio按钮属性的使用
男
女
女
女
总结:属性使用还是直接卸载对应的组件标签上以 属性名=属性值 方式使用
3.Radio事件的使用
男
女
总结:
- 事件的使用也是和属性使用是一致都是直接写在对应的组件标签上
- 事件在使用时必须使用Vue中绑定时间方式进行使用如 @事件名=事件处理函数(绑在在vue组件中对应函数)
4.radio按钮组
备选项3
备选项6
备选项9
8.2 checkbox组件
1.创建checkbox组件
北京
上海
天津
2.属性使用
北京
上海
天津
3.事件使用
上海
天津
4.复选框组的使用
8.3 Input 输入框组件
1.创建Input组件
2.常用属性
3.事件使用
4.方法的使用
方法的使用
focus方法
blur方法
总结
- 在使用组件的方法时需要在对应的组件中加入
ref="组件别名" - 在调用方法时直接使用
this.$refs.组件别名.方法名()
注意:在elementui中所有组件 都存在 属性 事件 和方法
属性:直接写在对应的组件标签上 使用方式:属性名=属性值方式
事件: 直接使用vue绑定事件方式写在对应的组件标签上 使用方式:@事件名=vue中事件处理函数
方法: 1.在对应组件标签上使用ref=组件别名2.通过使用this.$refs.组件别名.方法名()进行调用
8.4 Select选择器组件的使用
1.组件创建
# 1.数据写死在页面上
北京
天津
注意:1.要求下拉列表中必须存在option的value属性值 2.要求select中必须使用v-model进行数据绑定
# 2.如何动态获取数据
# 3.获取下拉列表选中数据
2.属性使用
......
3.事件的使用
4.方法的使用
1.给组件通过ref起别名并绑定到vue实例中
....
2.调用方法
this.$refs.selects.focus();//方法调用
8.5 Switch 开关组件
1.Switch组件的创建
2.属性使用
3.事件使用
4.方法使用
调用方法
8.6 DatePicker组件
1.创建
2.属性的使用
3.Picker Options 和 Shortcuts使用
- Shortcuts: 用来增加日期组件的快捷面板
- Picker Options: 用来对日期控件做自定义配置
3.1 Shortcuts使用
日期配置
3.2 Picker Options
4.事件使用
8.7 Upload组件
1.组件创建
点击上传
只能上传jpg/png文件，且不超过500kb
注意:在使用upload组件时必须设置action属性 action属性为必要参数不能省略
2.属性和事件的使用
将文件拖到此处，或点击上传
只能上传jpg/png文件，且不超过500kb
- 注意:在使用upload组件时没有event事件,所有事件都是属性事件
3.方法的使用
........
方法调用:
this.$refs.uploads.clearFiles();
this.$refs.uploads.abort();
this.$refs.uploads.submit();
8.8 Form组件
1.组件的创建
......
立即创建
取消
2.内联表单
.......
通过设置 inline=true方式将表单作为内联表单处理
3.表单验证
- 使用说明:
Form 组件提供了表单验证的功能，只需要通过
rules属性传入约定的验证规则，并将 Form-Item 的prop属性设置为需校验的字段名即可。校验规则参见 async-validator
3.1 失去焦点自动验证
....
3.2 表单提交调用表单组件的验证方法验证
立即创建
取消
...
methods: {
onSubmit(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
//发送异步请求 到 springboot项目
} else {
console.log('error submit!!');
return false;
}
});
}
}
4.自定义表单的验证规则
提交
重置
element-ui的组件太多了，我也就是把我最近练习的给记录下来，其余的这里就不再一一介绍了，大家有需要的可以看文档，自行去测试。谢谢！！！