el-select入门学习

学习内容1.el-select配合el-option使用2.局部禁用和整体禁用3.可清除内容关键字clearable4.自定义下拉列表框5.el-option-group和el-option配合使用(相当于两个for循环)6.开启查询下拉列表功能关键字filterable7.远程搜索（难点）8.多选关键字multiple，创建选项allow-create代码效果图代码<!DOCTYPE ht

念头通达を

3802人浏览 · 2022-05-16 15:23:48

念头通达を · 2022-05-16 15:23:48 发布

学习内容
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>