vue实现多选下拉

2026-02-17 14:10:39VUE

Vue 多选下拉实现方法

使用原生 HTML 和 Vue 指令

<template>
  <select v-model="selectedOptions" multiple>
    <option v-for="option in options" :value="option.value">
      {{ option.text }}
    </option>
  </select>
</template>

<script>
export default {
  data() {
    return {
      selectedOptions: [],
      options: [
        { value: '1', text: '选项1' },
        { value: '2', text: '选项2' },
        { value: '3', text: '选项3' }
      ]
    }
  }
}
</script>

使用 Element UI 组件库

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

<script>
export default {
  data() {
    return {
      selectedOptions: [],
      options: [{
        value: '1',
        label: '选项1'
      }, {
        value: '2',
        label: '选项2'
      }, {
        value: '3',
        label: '选项3'
      }]
    }
  }
}
</script>

使用 Vue Multiselect 插件

安装插件：

npm install vue-multiselect

使用示例：

<template>
  <multiselect
    v-model="selectedOptions"
    :options="options"
    :multiple="true"
    :close-on-select="false"
    placeholder="选择项目"
    label="text"
    track-by="value">
  </multiselect>
</template>

<script>
import Multiselect from 'vue-multiselect'

export default {
  components: { Multiselect },
  data() {
    return {
      selectedOptions: [],
      options: [
        { value: '1', text: '选项1' },
        { value: '2', text: '选项2' },
        { value: '3', text: '选项3' }
      ]
    }
  }
}
</script>

自定义多选下拉组件

<template>
  <div class="custom-multiselect">
    <div class="selected-options" @click="toggleDropdown">
      <span v-for="(option, index) in selectedOptions" :key="index">
        {{ getOptionText(option) }}
        <span @click.stop="removeOption(index)">×</span>
      </span>
    </div>
    <div class="dropdown" v-show="isOpen">
      <div
        v-for="(option, index) in options"
        :key="index"
        @click="selectOption(option)"
        :class="{ selected: isSelected(option) }">
        {{ option.text }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    options: Array,
    value: Array
  },
  data() {
    return {
      isOpen: false,
      selectedOptions: this.value || []
    }
  },
  methods: {
    toggleDropdown() {
      this.isOpen = !this.isOpen
    },
    selectOption(option) {
      if (!this.isSelected(option)) {
        this.selectedOptions.push(option.value)
      } else {
        this.selectedOptions = this.selectedOptions.filter(
          val => val !== option.value
        )
      }
      this.$emit('input', this.selectedOptions)
    },
    removeOption(index) {
      this.selectedOptions.splice(index, 1)
      this.$emit('input', this.selectedOptions)
    },
    isSelected(option) {
      return this.selectedOptions.includes(option.value)
    },
    getOptionText(value) {
      const option = this.options.find(opt => opt.value === value)
      return option ? option.text : ''
    }
  }
}
</script>