elementui简单笔记中

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 的组件太多了，我也就是把我最近练习的给记录下来，其余的这里就不再一一介绍了，大家有需要的可以看文档，自行去测试。谢谢！！！