element-ui的简单笔记
关注一下公众号：内有相关文章！！
八、Form相关组件
##### 8.1 Radio单选按钮
1.创建Radio按钮
<!--组件创建--><el-radio v-model="label" label="男">男</el-radio><el-radio v-model="label" label="女">女</el-radio><script> export default { name: "Radio", data(){ return{ label:'男' } } }</script>注意:在使用radio单选按钮是至少加入v-model和label两个属性
2.Radio按钮属性的使用
<el-radio v-model="label" name="sex" disabled label="男">男</el-radio><el-radio v-model="label" name="sex" border size="small" label="女">女</el-radio><el-radio v-model="label" border size="mini" label="女">女</el-radio><el-radio v-model="label" border size="medium" label="女">女</el-radio>总结:属性使用还是直接卸载对应的组件标签上以 属性名=属性值 方式使用
3.Radio事件的使用
<el-radio v-model="label" @change="aa" name="sex" label="男">男</el-radio><el-radio v-model="label" @change="aa" name="sex" border size="small" label="女">女</el-radio><script> export default { name: "Radio", data(){ return{ label:'男' } }, methods:{ aa(){ //定义的事件处理函数 console.log(this.label); } } }</script>总结:
- 事件的使用也是和属性使用是一致都是直接写在对应的组件标签上
- 事件在使用时必须使用Vue中绑定时间方式进行使用如 @事件名=事件处理函数(绑在在vue组件中对应函数)
4.radio按钮组
<el-radio-group v-model="radio"> <el-radio :label="3">备选项3</el-radio> <el-radio :label="6">备选项6</el-radio> <el-radio :label="9">备选项9</el-radio></el-radio-group><script> export default { name: "Radio", data() { return { radio: 6 } } }</script>8.2 checkbox组件
1.创建checkbox组件
<el-checkbox v-model="checked">北京</el-checkbox><el-checkbox v-model="checked">上海</el-checkbox><el-checkbox v-model="checked">天津</el-checkbox>2.属性使用
<el-checkbox v-model="checked" disabled true-label="北京">北京</el-checkbox><el-checkbox checked border true-label="上海">上海</el-checkbox><el-checkbox v-model="checked" true-label="天津">天津</el-checkbox>3.事件使用
<el-checkbox @change="aa"v-model="checked" true-label="上海">上海</el-checkbox><el-checkbox v-model="checked" @change="aa" true-label="天津">天津</el-checkbox><script> export default { name: "Checkbox", data(){ return{ checked:true } }, methods:{ aa(){ console.log(this.checked); } } }</script>4.复选框组的使用
<el-checkbox-group @change="bb" :min="1" v-model="checkList"> <el-checkbox label="复选框 A"></el-checkbox> <el-checkbox label="复选框 B"></el-checkbox> <el-checkbox label="复选框 C"></el-checkbox> <el-checkbox label="禁用" disabled></el-checkbox> <el-checkbox label="选中且禁用" disabled></el-checkbox></el-checkbox-group><script> export default { name: "Checkbox", data(){ return{ checked:true, checkList:[], } }, methods:{ aa(){ console.log(this.checked); }, bb(){ console.log(this.checkList); } } }</script>8.3 Input 输入框组件
1.创建Input组件
<el-input v-model="name"></el-input><script> export default { name: "Input", data(){ return { name:'xiaochen' } } }</script>2.常用属性
<el-input v-model="name" disabled type="textarea"></el-input><el-input v-model="price" :maxlength="10" show-word-limit :minlength="5"></el-input><el-input prefix-icon="el-icon-user-solid" placeholder="请输入用户名" clearable v-model="username"></el-input><el-input suffix-icon="el-icon-star-off" placeholder="请输入密码" show-password type="password" clearable v-model="password"></el-input><script> export default { name: "Input", data() { return { restaurants: [], state1: '', state2: '', name:'xiaochen', price:0.0, username:"", password:"", }; }, }</script>3.事件使用
<el-input v-model="username" @blur="aaa" @focus="bbb" @clear="clears" clearable @input="ccc"></el-input><script> export default { name: "Input", data() { return { restaurants: [], state1: '', state2: '', name:'xiaochen', price:0.0, username:"", password:"", }; }, methods:{ aaa(){ console.log('失去焦点'); ; }, bbb(){ console.log("获取焦点"); }, ccc(value){ console.log("改变:"+value); }, clears(){ console.log("清楚"); } } }</script>4.方法的使用
<h1>方法的使用</h1><el-input v-model="username" ref="inputs"></el-input><el-button @click="focusInputs">focus方法</el-button><el-button @click="blurInputs">blur方法</el-button><script> export default { name: "Input", data() { return{} }, methods:{ //调用focus方法 focusInputs(){ this.$refs.inputs.focus(); }, //调用失去焦点方法 blurInputs(){ this.$refs.inputs.blur(); } } }</script>总结
- 在使用组件的方法时需要在对应的组件中加入
ref="组件别名" - 在调用方法时直接使用
this.$refs.组件别名.方法名()
注意:在elementui中所有组件 都存在 属性 事件 和方法
属性:直接写在对应的组件标签上 使用方式:属性名=属性值方式
事件: 直接使用vue绑定事件方式写在对应的组件标签上 使用方式:@事件名=vue中事件处理函数
方法: 1.在对应组件标签上使用ref=组件别名2.通过使用this.$refs.组件别名.方法名()进行调用
8.4 Select选择器组件的使用
1.组件创建
# 1.数据写死在页面上<el-select v-model="cityName"> <el-option value="北京">北京</el-option> <el-option value="天津">天津</el-option></el-select> 注意:1.要求下拉列表中必须存在option的value属性值 2.要求select中必须使用v-model进行数据绑定# 2.如何动态获取数据 <el-select> <el-option v-for="option in options" :label="option.name" :value="option.id" :key="option.id"> </el-option> </el-select> <script> export default { name: "Select", data(){ return{ options:[ {id:'1',name:"研发部"}, {id:'2',name:"小卖部"}, {id:'3',name:"小米部"}, ] } }, } </script> # 3.获取下拉列表选中数据 <el-select v-model="cityId" multiple clearable> <el-option v-for="option in options" :label="option.name" :value="option.id" :key="option.id"></el-option></el-select><script> export default { name: "Select", data(){ return{ options:[ {id:'1',name:"研发部"}, {id:'2',name:"小卖部"}, {id:'3',name:"小米部"}, ], cityId:'' } }, }</script>2.属性使用
<el-select v-model="cityId" multiple clearable> ......</el-select>3.事件的使用
<el-select v-model="cityId" @change="aaa" multiple clearable> <el-option v-for="option in options" :label="option.name" :value="option.id" :key="option.id"> </el-option></el-select><script> export default { name: "Select", data(){ return{ options:[ {id:'1',name:"研发部"}, {id:'2',name:"小卖部"}, {id:'3',name:"小米部"}, ], cityId:'', cityName:'' } }, methods:{ aaa(value){ console.log(value); } } }</script>4.方法的使用
1.给组件通过ref起别名并绑定到vue实例中 <el-select ref="selects" v-model="cityId" @change="aaa" multiple clearable> .... </el-select>2.调用方法 this.$refs.selects.focus();//方法调用8.5 Switch 开关组件
1.Switch组件的创建
<el-switch v-model="value"></el-switch><script> export default { name: "Switchs", data(){ return{ value:true } } }</script>2.属性使用
<el-switch v-model="value" active-text="打开" active-color="#13ce66" inactive-color="#ff4949" :active- value="true" :inactive-value="false" inactive-text="关闭" :width="200"></el-switch>3.事件使用
<el-switch v-model="value" @change="aaa"></el-switch><script> export default { name: "Switchs", data(){ return{ value:true } }, methods:{ aaa(value){ console.log(value); } } }</script>4.方法使用
<el-switch ref="sw" v-model="value" @change="aaa" active-text="打开" active-color="#13ce66" inactive-color="#ff4949" :active-value="true" :inactive-value="false" inactive-text="关闭" :width="200"></el-switch><el-button @click="bbb">调用方法</el-button><script> export default { name: "Switchs", data(){ return{ value:true } } , methods:{ aaa(value){ console.log(value); }, bbb(){ alert(); this.$refs.sw.focus();//方法调用 } } }</script>8.6 DatePicker组件
1.创建
<el-date-picker v-model="createDate" ></el-date-picker>2.属性的使用
<el-date-picker v-model="createDate" :editable="false" :clearable="false" placeholder="请输入创建时间" type="daterange" start-placeholder="生产时间" end-placeholder="过期时间" format="yyyy/MM/dd" ></el-date-picker>3.Picker Options 和 Shortcuts使用
- Shortcuts: 用来增加日期组件的快捷面板
- Picker Options: 用来对日期控件做自定义配置
3.1 Shortcuts使用
</el-date-picker><h1>日期配置</h1><el-date-picker v-model="createDate" type="date" placeholder="请输入时间" :picker-options="pickerOptions" ></el-date-picker><script> export default { name: "DatePrickers", data(){ return{ createDate:"", pickerOptions: { disabledDate(time) { return time.getTime() > Date.now(); }, shortcuts: [{ //定义的shortucts text: '今天', onClick(picker) { picker.$emit('pick', new Date()); } }, { text: '昨天', onClick(picker) { const date = new Date(); date.setTime(date.getTime() - 3600 * 1000 * 24); picker.$emit('pick', date); } }, { text: '一周前', onClick(picker) { const date = new Date(); date.setTime(date.getTime() - 3600 * 1000 * 24 * 7); picker.$emit('pick', date); } }] }, } } }</script>3.2 Picker Options
<el-date-picker v-model="createDate" type="date" placeholder="请输入时间" :picker-options="pickerOptions" ></el-date-picker><script> export default { name: "DatePrickers", data(){ return{ createDate:"", pickerOptions: { disabledDate(time) { //用来对日期进行的控制 return time.getTime() < Date.now(); } }, } } }</script>4.事件使用
<el-date-picker ..... :picker-options="pickerOptions" @change="aaa" ></el-date-picker><script> export default { name: "DatePrickers", data(){ return{ createDate:"", } }, methods:{ aaa(value){ //发生change事件的函数 console.log(value); } } }</script>8.7 Upload组件
1.组件创建
<el-upload action="https://jsonplaceholder.typicode.com/posts/" :file-list="fileList"> <el-button size="small" type="primary">点击上传</el-button> <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div></el-upload>注意:在使用upload组件时必须设置action属性 action属性为必要参数不能省略
2.属性和事件的使用
<el-upload :limit="3" :on-exceed="exceed" :multiple="false" :before-remove="beforeRemove" :on-remove="remove" :on-preview="show" :drag="true" accept=".txt,.png" :show-file-list="true" name="aaa" :data="info" action="https://jsonplaceholder.typicode.com/posts/" :file-list="fileList"> <i class="el-icon-upload"></i> <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div> <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div></el-upload><script> export default { name: "Uploads", data() { return { fileList: [{ name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }, { name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }], info: {id:"21"} } }, methods:{ show(file){ console.log(file); }, remove(file,fileList){ console.log(file); console.log(fileList); //alert(fileList.length) }, beforeRemove(file,fileList){ if(fileList.length<3){ alert("上传文件不能少于3个") return false; } }, exceed(file,fileList){ alert("文件超出上传的个数限制") } } }</script>- 注意:在使用upload组件时没有event事件,所有事件都是属性事件
3.方法的使用
<el-upload ref="uploads" ....>........</el-upload>方法调用: this.$refs.uploads.clearFiles(); this.$refs.uploads.abort(); this.$refs.uploads.submit();8.8 Form组件
1.组件的创建
<el-form ref="form" :model="form" label-width="80px"> <el-form-item label="活动名称"> <el-input v-model="form.name"></el-input> </el-form-item> ...... <el-form-item> <el-button type="primary" @click="onSubmit">立即创建</el-button> <el-button>取消</el-button> </el-form-item></el-form><script> export default { name: "Form", data() { return { form: { name: '', region: '', date1: '', date2: '', delivery: false, type: [], resource: '', desc: '' } } }, methods: { onSubmit() { console.log('submit!'); } } }</script>2.内联表单
<el-form :inline="true" :model="formInline" class="demo-form-inline"> .......</el-form>通过设置 inline=true方式将表单作为内联表单处理
3.表单验证
- 使用说明:
Form 组件提供了表单验证的功能，只需要通过rules属性传入约定的验证规则，并将 Form-Item 的prop属性设置为需校验的字段名即可。校验规则参见 async-validator
3.1 失去焦点自动验证
<el-form :rules="rules" ...> <el-form-item label="活动名称" prop="name"> <el-input v-model="form.name"></el-input> </el-form-item> ....</el-form><script> export default { name: "Form", data() { return { form: { name: '', region: '', date1: '', date2: '', delivery: false, type: [], resource: '', desc: '' }, rules: { name: [ {required: true, message: '请输入活动名称', trigger: 'blur'}, {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'} ], } } }, methods: { onSubmit() { console.log('submit!'); } } }</script>3.2 表单提交调用表单组件的验证方法验证
<el-form :rules="rules".... ref="form" > <el-form-item label="活动名称" prop="name"> <el-input v-model="form.name"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="onSubmit('form')">立即创建</el-button> <el-button>取消</el-button> </el-form-item></el-form>...methods: { onSubmit(formName) { this.$refs[formName].validate((valid) => { if (valid) { alert('submit!'); //发送异步请求 到 springboot项目 } else { console.log('error submit!!'); return false; } }); } }4.自定义表单的验证规则
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px"> <el-form-item label="手机号" prop="phone"> <el-input type="password" v-model="ruleForm.phone" ></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button> <el-button @click="resetForm('ruleForm')">重置</el-button> </el-form-item></el-form><script> export default { name: "Form", data() { let validatePhone = (rule,value,callback)=>{ //定义自定义的验证规则 console.log(rule); console.log(value); console.log(callback); if(!value){ callback(new Error("手机号不能为空!")); } if(!/^1[3456789]\d{9}$/.test(value)){ callback(new Error("手机号码不正确!!")) } } return { form: { name: '', region: '', date1: '', date2: '', delivery: false, type: [], resource: '', desc: '' }, rules: { //验证规则 name: [ //使用默认规则 {required: true, message: '请输入活动名称', trigger: 'blur'}, {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'} ], phone:[ //使用自定义规则 {validator:validatePhone,trigger: 'blur'} ] }, ruleForm:{ phone:'', }, } }, methods: { } }</script>element-ui的组件太多了，我也就是把我最近练习的给记录下来，其余的这里就不再一一介绍了，大家有需要的可以看文档，自行去测试。谢谢！！！