el-select入门学习

自律最差的编程狗

已于 2022-05-16 15:29:19 修改

阅读量3.8k

点赞数 1

分类专栏： element-ui 文章标签： elementui

于 2022-05-16 15:23:48 首次发布

原文链接：https://element.eleme.cn/#/zh-CN/component/select

版权

element-ui 专栏收录该内容

43 篇文章 21 订阅

订阅专栏

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

官网地址:element-ui官网

自律最差的编程狗

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
el-select入门学习

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

扫一扫

专栏目录