Vue で複数選択ドロップダウン ボックスを実装する方法

Vue で複数選択ドロップダウン ボックスを実装する方法

Vue 開発では、ドロップダウン ボックスは一般的なフォーム コンポーネントの 1 つです。通常、ラジオのドロップダウン ボックスを使用してオプションを選択します。ただし、ユーザーが同時に複数のオプションを選択できるように、複数選択ドロップダウン ボックスを実装する必要がある場合があります。この記事では、Vue で複数選択ドロップダウン ボックスを実装する方法と具体的なコード例を紹介します。

1. Element UI コンポーネント ライブラリを使用する
Element UI は、豊富な UI コンポーネントとツールのセットを提供する、Vue に基づくデスクトップ コンポーネント ライブラリです。 Element UI には、ドロップダウン ボックスを実装するために使用できる Select と呼ばれるコンポーネントがあります。このコンポーネントは複数選択モードをサポートしており、multiple 属性を true に設定することで有効にできます。簡単な例を次に示します。

<el-select v-model="selectedOptions" multiple>
  <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option>
</el-select>

data() {
  return {
    options: [
      { value: 'option1', label: '选项1' },
      { value: 'option2', label: '选项2' },
      { value: 'option3', label: '选项3' }
    ],
    selectedOptions: []
  };
}

上記のコードでは、v-model ディレクティブを使用して配列 selectedOptions をバインドし、ユーザーが選択したオプションを保存します。 multiple 属性を true に設定すると、ドロップダウン ボックスで複数の選択をサポートできます。

2. カスタマイズされた複数選択ドロップダウン ボックス コンポーネント
Element UI が提供するコンポーネント ライブラリを使用することに加えて、独自のニーズに応じて複数選択ドロップダウン ボックスを実装することもできます。以下は、カスタムの複数選択ドロップダウン ボックス コンポーネントのサンプル コードです。

<template>
  <div class="dropdown" @click="toggleDropdown">
    <div class="selected-options">
      <span v-if="selectedOptions.length === 0">请选择...</span>
      <span v-else>
        <span v-for="option in selectedOptions" :key="option.value">
          {{ option.label }}
          <span class="remove" @click.stop="removeOption(option)">&#10006;</span>
        </span>
      </span>
    </div>
    <div class="dropdown-list" v-show="showDropdown">
      <span v-for="option in options" :key="option.value" @click="toggleOption(option)">
        <input type="checkbox" :value="option.value" :checked="isChecked(option)">
        {{ option.label }}
      </span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { value: 'option1', label: '选项1' },
        { value: 'option2', label: '选项2' },
        { value: 'option3', label: '选项3' }
      ],
      selectedOptions: [],
      showDropdown: false
    };
  },
  methods: {
    toggleDropdown() {
      this.showDropdown = !this.showDropdown;
    },
    toggleOption(option) {
      if (this.isSelected(option)) {
        this.removeOption(option);
      } else {
        this.addOption(option);
      }
    },
    isSelected(option) {
      return this.selectedOptions.some(selectedOption => selectedOption.value === option.value);
    },
    addOption(option) {
      if (!this.isSelected(option)) {
        this.selectedOptions.push(option);
      }
    },
    removeOption(option) {
      this.selectedOptions = this.selectedOptions.filter(selectedOption => selectedOption.value !== option.value);
    },
    isChecked(option) {
      return this.isSelected(option);
    }
  }
};
</script>

<style scoped>
.dropdown {
  position: relative;
  display: inline-block;
}
.selected-options {
  border: 1px solid #aaa;
  padding: 5px;
  cursor: pointer;
}
.dropdown-list {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid #aaa;
  background-color: #fff;
  padding: 5px;
}
.remove {
  margin-left: 5px;
  cursor: pointer;
}
</style>

上記のコードでは、変数 selectedOptions を使用して、ユーザーが選択したオプションを保存します。ドロップダウン ボックス コンテナーの一部をクリックしてドロップダウン ボックスを展開または折りたたみ、各オプションをクリックして選択状態を切り替え、selectedOptions 配列を使用して選択したオプションを保存します。 RemoveOption メソッドはオプションを削除するために使用され、isChecked メソッドはオプションが選択されているかどうかを判断するために使用されます。このコンポーネントは、他のコンポーネントに導入して使用できます。

概要
Vue で複数選択ドロップダウン ボックスを実装するには、Element UI によって提供される Select コンポーネントを使用し、multiple 属性を true に設定します。さらに、コンポーネントをカスタマイズして複数選択ドロップダウン ボックスを実装し、独自のニーズに応じてカスタマイズすることもできます。上記は複数選択ドロップダウン ボックスを実装する 2 つの方法です。

以上がVue で複数選択ドロップダウン ボックスを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。