el-select 组件还可以这样玩？

普通的 el-select 组件

下拉菜单组件是element-ui库很普通且重要的组件，用于单选、多选项目。

基本的下拉框效果如下：

<template>
  <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>
</template>

或者这样多选：

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

UI出难题：要实现如下奇怪样式的下拉单选功能

下面来看看我的实现吧：

（其实就是改了下拉框组件的样式而已，嘻嘻~）

<template>
<div class="vary-select-cls">
  <el-select v-model="selectValue"
    :placeholder="placeholder"
    popper-class="popper-class-vary-select"
    :popper-append-to-body="false"
    @change="selectChange">
    <el-option
      v-for="(item, index) in optionData"
      :key="index"
      :label="item.label"
      :value="item.value"
      >
      <div class="option-custom">{{ item.label }}</div>
    </el-option>
  </el-select>
</div>
</template>
<script>

export default {
  name: 'VarySelectName',
  components: {},
  props: {
    placeholder: {
      type: String,
      default: '请选择货币面值'
    },
    optionData: {
      type: Array,
      default: () => {
        return [
          { label: '100元', value: 100 },
          { label: '50元', value: 50 },
          { label: '20元', value: 20 },
          { label: '10元', value: 10 },
          { label: '5元', value: 5 },
          { label: '2元', value: 2 },
          { label: '1元', value: 1 },
          { label: '0.5元', value: 0.5 },
          { label: '0.2元', value: 0.2 },
          { label: '0.1元', value: 0.1 },
          { label: '0.05元', value: 0.05 },
          { label: '0.02元', value: 0.02 },
          { label: '0.01元', value: 0.01 },
          { label: '零钱', value: 0 }
        ]
      }
    }
  },
  data () {
    return {
      selectValue: ''
    }
  },
  methods: {
    // 选中的值
    selectChange (v) {
      console.log(v)
      this.$emit('selectChange', v)
    }
  }
}
</script>
<style lang="scss" scoped>
.vary-select-cls {
  width: 100%;
  ::v-deep input {
    border: 1px solid rgba(0,0,0,0.30);
  }
  .popper-class-vary-select {
    ul.el-select-dropdown__list {
      .el-select-dropdown__item {
        width: 32%;
        padding: 0;
        margin: 2px 0 2px 2px;
        .option-custom {
          background: rgba(255,255,255,0.00);
          border: 1px solid rgba(0,0,0,0.08);
          border-radius: 2px;
          // width: 128px;
          height: 32px;
          line-height: 32px;
          text-align: center;
        }
      }
      .el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
        background: #DBF3F0;
        border: 1px solid #01AE97;
        border-radius: 2px;
        color: rgba(0,0,0,0.70);
      }
    }
  }
}
</style>
<style lang="scss">
.vary-select-cls {
  .popper-class-vary-select {
    ul.el-select-dropdown__list {
      display: flex;
      flex-wrap: wrap;
      margin-left: 1%;
      margin-top: 4px;
    }
  }
}
</style>

总结：

1. popper-append-to-body：将弹出下拉框插入至 页面 元素，便于作用样式；
2. popper-class：自定义一个下拉框的类名，限制重写的样式影响其他组件中的el-select;
3. .vary-select-cls：全局包一层样式，限制重写的样式影响其他组件中的el-select;
4. .option-custom：自定义下拉框选项样式；
5. change 事件把选中的值通过 this.$emit('selectChange', v) 抛给父组件；

小结

本文写了使用el-select组件巧妙解决工作中遇到的问题；