Element_Select简介与用法

Posted 2020-11-26 caoxueying2018

一、Select简介

当选项过多时，使用下拉菜单展示并选择内容。

二、Select使用

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

</template>

<script>
  export default {
    data() {
      return {
        options: [{
          value: ‘选项1‘,
          label: ‘黄金糕‘
        }, {
          value: ‘选项2‘,
          label: ‘双皮奶‘
        }, {
          value: ‘选项3‘,
          label: ‘蚵仔煎‘
        }, {
          value: ‘选项4‘,
          label: ‘龙须面‘
        }, {
          value: ‘选项5‘,
          label: ‘北京烤鸭‘
        }],
        value: ‘‘
      }
    }
  }
</script>

View Code

三、更改样式

提示：可在组件中，用css更改其默认样式。（注意：1、Select要设置其class，避免影响到其他组件中的Select；2、不要设置scoped,因为设置了scoped则样式仅仅应用到 style 元素的父元素及其子元素,导致该样式优先级低于组件的默认样式优先级，使设置样式失效）

    #app {
      background: #002140;
      width:100%;
      height: 1000px;
      padding: 300px;
      .labelSelectContent {
            width: 118px;
            .el-select__caret {
              color: #5082b2;
            }
            .el-input--suffix {
              width: 100%;
              .el-input__inner {
                  width: 100%;
                  height: 28px;
                  line-height: 28px;
                  background: none;
                  border:1px solid #5082b2;
                  color: #cde6ff;
                  padding-left: 7px;
                  padding-right: 0;
                  border-radius: 2px;
                }
                .el-input__icon {
                  line-height: 20px;
                }
            }
        }
    }

View Code

四、实现效果