Vue.jsでカスタム選択コンポーネントを作成するコードにデモデモデモを添付します。

 
selectタグをカスタマイズする設計はとても難しいです。場合によっては、様式化されたdivとカスタムJavaScriptとを組み合わせて自分のシナリオを構築することは不可能です。本稿では、完全カスタムCSS設定のスタイルを使用したVue.jsコンポーネントの構築方法を学びます。
 
Demo：https://codesandbox.io/s/custom-vuejs-select-component-8nqgd
HTML

<template>
 <div
 class="custom-select"
  :tabindex="tabindex"
  @blur="open = false"
 >
  <div
  class="selected"
  :class="{open: open}"
  @click="open = !open"
 >
  {{ selected }}
 </div>
 <div
  class="items"
  :class="{selectHide: !open}"
 >
  <div
  class="item"
  v-for="(option, i) of options"
  :key="i"
  @click="selected=option; open=false; $emit('input', option)"
  >
  {{ option }}
  </div>
 </div>
 </div>
</template>

以下の点に注意してください。

tabindex属性は、我々のコンポーネントに焦点を合わせることができ、それがぼやけてしまう。ユーザーがコンポーネントの外部をクリックすると、blurイベントは私たちのコンポーネントを閉じます。

inputパラメータは選択されたオプションを発行し、親コンポーネントは簡単に変更に反応することができます。

JavaScript

 <script>
 export default {
 props:{
  options:{
  type: Array,
  required: true
  },
  tabindex:{
  type: Number,
  required: false,
  default: 0
 }
 },
 data() {
 return {
  selected: this.options.length > 0 ? this.options[0] : null,
  open: false
 };
 },
 mounted(){
 this.$emit('input', this.selected);
 }
};
</script>

また、注意すべき重要事項：
また、選択した値をmountに送ります。これは親レベルが明示的にデフォルト値を設定する必要がないためです。私たちのselectコンポーネントが大きなフォームの一部であれば、正しいtabindexを設定したいです。
CSS

<style scoped>
 .custom-select {
 position: relative;
 width: 100%;
 text-align: left;
 outline: none;
 height: 47px;
 line-height: 47px;
}

.selected {
 background-color: #080D0E;
 border-radius: 6px;
 border: 1px solid #858586;
 color: #ffffff;
 padding-left: 8px;
 cursor: pointer;
 user-select: none;
}

.selected.open{
 border: 1px solid #CE9B2C;
 border-radius: 6px 6px 0px 0px;
}

.selected:after {
 position: absolute;
 content: "";
 top: 22px;
 right: 10px;
 width: 0;
 height: 0;
 border: 4px solid transparent;
 border-color: #fff transparent transparent transparent;
}

.items {
 color: #ffffff;
 border-radius: 0px 0px 6px 6px;
 overflow: hidden;
 border-right: 1px solid #CE9B2C;
 border-left: 1px solid #CE9B2C;
 border-bottom: 1px solid #CE9B2C;
 position: absolute;
 background-color: #080D0E;
 left: 0;
 right: 0;
}

.item{
 color: #ffffff;
 padding-left: 8px;
 cursor: pointer;
 user-select: none;
}

.item:hover{
 background-color: #B68A28;
}

.selectHide {
 display: none;
}
</style>

このCSSは一例です。あなたの好みに応じてスタイルを勝手に変更できます。
これがあなたのカスタム選択コンポーネントを作成するのに役立つことを願っています。以下は完全なコンポーネントのポイントのリンクです。
最後に、オンラインプレゼンテーションの例：https://codesandbox.io/s/custom-vuejs-select-component-8nqgd
締め括りをつける
ここで、Vue.jsの中でユーザー定義の選択コンポーネントを作成するコードについてデモデモを添付した文章を紹介します。もっと関連したvuejsのカスタム選択コンポーネントの内容は以前の文章を検索したり、下記の関連記事を見たりしてください。これからもよろしくお願いします。