element-ui el-select选择器组件下拉框增加自定义按钮

先看效果

原理：在el-select下添加禁用的el-option，将其value绑定为undefined，然后覆盖el-option禁用状态下的默认样式即可

示例代码如下：

<template>
  <div class="extra-button-select" style="padding: 20px">
    <el-select v-model="selected">
      <el-option
        v-for="option in options"
        :key="option.id"
        :label="option.label"
        :value="option.id"
      ></el-option>
      <el-option :value="undefined" disabled style="cursor: pointer">
        <el-button type="text" @click="onClickBtn1"><i class="el-icon-menu"></i> 按钮1</el-button>
      </el-option>
      <el-option :value="undefined" disabled style="cursor: pointer">
        <el-button type="text" @click="onClickBtn2"><i class="el-icon-menu"></i> 按钮2</el-button>
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  name: 'extra-button-select',
  data() {
    return {
      selected: 1,
      options: [
        {
          id: 1,
          label: 'Option 1',
        },
        {
          id: 2,
          label: 'Option 2',
        }
      ]
    }
  },
  methods: {
    onClickBtn1() {
      this.$message.info('点击了按钮1')
    },
    onClickBtn2() {
      this.$message.info('点击了按钮2')
    }
  }
}
</script>

<style scoped lang="scss">
</style>