Element UI学习1--select选择器

落日映苍穹つ 2023-01-02 11:26 348阅读 0赞

### 文章目录 ###

*  一、Element UI是什么？
 *  二、使用步骤
 *   *  1.安装
     *  2.select选择器
 *  总结

--------------------

# 一、Element UI是什么？ #

Element 饿了么前端出品的一套 基于 Vue 2.0 的桌面端组件库

# 二、使用步骤 #

## 1.安装 ##

1、npm 安装

npm i element-ui -S

2、CDN

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

3、脚手架安装  
如果电脑安装了vue-cli脚手架，可以直接输入 vue ui，在项目里配置Element UI组件

## 2.select选择器 ##

当选项过多时，使用下拉菜单展示并选择内容。  
1、基础用法  
代码如下：

<el-select v-model="value" placeholder="请选择">
         <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" >
         </el-option>
    </el-select>

export default { 
        data(){ 
            return{ 
                options:[
                    { 
                        value: '选项1',
                        label: '香蕉'
                    },
                    { 
                        value: '选项2',
                        label: '苹果',
                    },
                    { 
                        value: '选项3',
                        label: '火龙果'
                    },
                    { 
                        value: '选项4',
                        label: '猕猴桃'
                    },
                    { 
                        value: '选项5',
                        label: '草莓'
                    },
                    { 
                        value: '选项6',
                        label: '西瓜'
                    }
                ],
                value:''
                }
                }
                }

如图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbnJhYmJpdA_size_16_color_FFFFFF_t_70_pic_center]

--------------------

<el-select v-model="value" placeholder="请选择" clearable="" multiple="" collapse-tags filterable>
         <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled">
         </el-option>
    </el-select>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbnJhYmJpdA_size_16_color_FFFFFF_t_70_pic_center 1]  
2、创建条目

<el-select v-model="value" multiple filterable allow-create default-first-option placeholder="请选择">
         <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
         </el-option>
     </el-select>

![在这里插入图片描述][20210105183038662.jpg_pic_center]

3、分组

<el-select v-model="value" placeholder="请选择">
         <el-option-group v-for="group in options1" :key="group.label" :label="group.label">
                 <el-option v-for="item in group.options1" :key="item.value" :label="item.label" :value="item.value">
                 </el-option>
          </el-option-group>
    </el-select>

options1:[
                    { 
                        label: '热门城市',
                        options1:[
                            { 
                                value: 'Shanghai',
                                label: '上海'
                            },
                            { 
                               value: 'Beijing',
                               label: '北京' 
                            },
                            { 
                               value: 'Shenzhen',
                               label: '深圳'
                            }
                        ]
                    },
                    { 
                        label: '城市名',
                        options1:[
                            { 
                                value: 'Chengdu',
                                label: '成都'
                            },
                            { 
                                value: 'Hangzhou',
                                label: '杭州'
                            },
                            { 
                                value: 'Xiamen',
                                label: '厦门'
                            }
                        ]
                    }
                ],

![在这里插入图片描述][20210105182706831.jpg_pic_center]

# 总结 #

以上是我今天学习的关于Element UI组件中select选择器的部分内容

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbnJhYmJpdA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221119/432c7c9a88814c679ae746cad9f8c5ff.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbnJhYmJpdA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221119/a6efce92c9df4ace960ca40f801cfdaf.png
[20210105183038662.jpg_pic_center]: /images/20221119/d188ee43b91845d295435fe26e4dd611.png
[20210105182706831.jpg_pic_center]: /images/20221119/ca02ab07119c47e2bcb149d4cc58ad5f.png