el-select入门学习

作者：我家自动化 | 2024-02-19 12:45:44

踩

el-select

学习内容
1.el-select配合el-option使用
2.局部禁用和整体禁用
3.可清除内容关键字clearable
4.自定义下拉列表框
5.el-option-group和el-option配合使用(相当于两个for循环)
6.开启查询下拉列表功能关键字filterable
7.远程搜索（难点）关键字remote、remote-method
8.多选关键字multiple，创建选项allow-create
代码效果图
在这里插入图片描述
代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
    <div id='app'>
        <el-select v-model='selectData' placeholder='请选择'>
            <el-option v-for='item in optionList' :key='item.id' :value='item.id' :label='item.label'></el-option>
        </el-select>
        <el-select v-model='selectData'>
            <el-option v-for='item in optionList' :key='item.id' :value='item.id' :label='item.label' :disabled="item.disabled"></el-option>
        </el-select>
        <el-select v-model='selectData' disabled>
            <el-option v-for='item in optionList' :key='item.id' :value='item.id' :label='item.label'></el-option>
        </el-select>
        <el-select v-model='selectData' clearable>
            <el-option v-for='item in optionList' :key='item.id' :value='item.id' :label='item.label'></el-option>
        </el-select>
        <el-select v-model='selectData'>
            <el-option v-for='item in optionList' :key='item.id' :value='item.id' :label='item.label'>
                <span style='float:left'>{{item.label}}</span>
                <span style='float:right;color:#8492a6;font-size:13px'>{{item.name}}</span>
            </el-option>
        </el-select>
        <el-select v-model='selectArea' placeholder='请选择'>
            <el-option-group v-for='area in areaList' :label='area.label' :key='area.label'>
                <el-option v-for='item in area.options' :key='item.value' :label='item.label' :value='item.value'></el-option>
            </el-option-group>
        </el-select>
        <el-select v-model='selectArea' placeholder='请选择' filterable>
            <el-option-group v-for='area in areaList' :label='area.label' :key='area.label'>
                <el-option v-for='item in area.options' :label='item.label' :value='item.value' :key='item.value'></el-option>
            </el-option-group>
        </el-select>
        <el-select 
            v-model='value'
            multiple
            filterable
            remote
            reserve-keyword
            placeholder='请输入关键字'
            :remote-method='remoteMethod'
            :loading='loading'
        >
            <el-option
                v-for='item in options'
                :key='item.value'
                :label="item.label"
                :value='item.value'
            ></el-option>
        </el-select>

        <el-select v-model='value2' placeholder='请点餐' multiple filterable allow-create>
            <el-option v-for='item in optionList' :label='item.label' :key='item.id' :value='item.id'></el-option>
        </el-select>
    </div>
</body>
</html>
<script>
    let vm = new Vue({
        el:'#app',
        data:{
            selectData:'',
            selectArea:'',
            value:[],
            value2:[],
            options:[],
            list:[],
            loading:false,
            optionList:[
                {id:1,label:'口水鸡',name:'koushuiji'},
                {id:2,label:'宫保鸡丁',name:'gongbaojiding'},
                {id:3,label:'黄焖鸡',name:'huangmenji'},
                {id:4,label:'无骨鸡爪',name:'wugujizha',disabled:true}
            ],
            areaList:[
                {label:'一线城市',
                options:[
                    {value:'shanghai',label:'上海'},
                    {value:'beijing',label:'北京'}
                ]},
                {label:'二线城市',
                options:[
                    {value:'chengdu',label:'成都'},
                    {value:'hefei',label:'合肥'},
                    {value:'suzhou',label:'苏州'}
                ]},
            ],
            states: ["Alabama", "Alaska", "Arizona",
                    "Arkansas", "California", "Colorado",
                    "Connecticut", "Delaware", "Florida",
                    "Georgia", "Hawaii", "Idaho", "Illinois",
                    "Indiana", "Iowa", "Kansas", "Kentucky",
                    "Louisiana", "Maine", "Maryland",
                    "Massachusetts", "Michigan", "Minnesota",
                    "Mississippi", "Missouri", "Montana",
                    "Nebraska", "Nevada", "New Hampshire",
                    "New Jersey", "New Mexico", "New York",
                    "North Carolina", "North Dakota", "Ohio",
                    "Oklahoma", "Oregon", "Pennsylvania",
                    "Rhode Island", "South Carolina",
                    "South Dakota", "Tennessee", "Texas",
                    "Utah", "Vermont", "Virginia",
                    "Washington", "West Virginia", "Wisconsin",
                    "Wyoming"]
                
        },
        created(){
            this.init()
        },
        methods:{
            init(){
                this.list = this.states.map(item => {
                    return {value:`value:${item}`,label:`label:${item}`}
                })
            },
            remoteMethod(query){
                if(query!== ''){
                    this.loading = true;
                    setTimeout(()=>{
                        this.loading = false
                        this.options = this.list.filter(item=>{
                            return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
                        })
                    },200);
                }else{
                    this.options = []
                }
            }
        }
    })
</script>
<style>

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141

官网地址:element-ui官网

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/114773