How to implement a multi-select drop-down box in Vue

How to implement a multi-select drop-down box in Vue

In Vue development, the drop-down box is one of the common form components. Normally, we use radio drop-down boxes to select an option. However, sometimes we need to implement a multi-select drop-down box so that users can select multiple options at the same time. In this article, we will introduce how to implement a multi-select drop-down box in Vue and provide specific code examples.

1. Use Element UI component library
Element UI is a desktop component library based on Vue, which provides a rich set of UI components and tools. In Element UI, there is a component called Select, which can be used to implement drop-down boxes. This component supports multiple selection mode, which can be enabled by setting the multiple attribute to true. The following is a simple example:

<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: []
  };
}

In the above code, we use the v-model directive to bind an array selectedOptions to store the options selected by the user. By setting the multiple attribute to true, the drop-down box can support multiple selections.

2. Customized multi-select drop-down box component
In addition to using the component library provided by Element UI, we can also implement a multi-select drop-down box according to our own needs. The following is a sample code for a custom multi-select drop-down box component:

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

In the above code, we use a variable selectedOptions to store the options selected by the user. Expand or collapse the drop-down box by clicking part of the drop-down box container, toggle the selected state by clicking each option, and use the selectedOptions array to store the selected options. The removeOption method is used to remove options, and the isChecked method is used to determine whether an option is selected. This component can be introduced and used in other components.

Summary
To implement a multi-select drop-down box in Vue, we can use the Select component provided by Element UI and set the multiple attribute to true. In addition, we can also customize components to implement multi-select drop-down boxes and customize them according to our own needs. The above are two methods to implement multi-select drop-down boxes. I hope they will be helpful to you.

The above is the detailed content of How to implement a multi-select drop-down box in Vue. For more information, please follow other related articles on the PHP Chinese website!