element-ui簡單筆記(中)

element-ui的簡單筆記

element-ui簡單筆記(上)
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的組件太多了，我也就是把我最近練習的給記錄下來，其餘的這裏就不再一一介紹了，大家有需要的可以看文檔，自行去測試。謝謝！！！

element-ui簡單筆記(中)

element-ui的簡單筆記

八、Form相關組件

8.1 Radio單選按鈕

8.2 checkbox組件

8.3 Input 輸入框組件

8.4 Select選擇器組件的使用

8.5 Switch 開關組件

8.6 DatePicker組件

8.7 Upload組件

8.8 Form組件

力扣第88、100題

python實現的簡單的學生信息管理系統

基於python和tkinter實現的一個簡單的學生信息管理系統

力扣第169、171、189、198、202題

力扣第70、83題

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結