vue实现多选下拉

实现多选下拉的基本思路

使用 Vue 结合第三方组件库（如 Element UI、Ant Design Vue）或自定义实现多选下拉功能。以下是两种常见实现方式。

使用 Element UI 的 Select 组件

Element UI 提供了 el-select 组件，支持多选功能。安装 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: 'option1', label: '选项1' },
        { value: 'option2', label: '选项2' },
        { value: 'option3', label: '选项3' }
      ]
    };
  }
};
</script>

• multiple 属性启用多选。
• v-model 绑定选中的值（数组形式）。
• options 定义下拉选项数据。

自定义实现多选下拉

如果需要完全自定义，可以通过组合 input、checkbox 和动态渲染实现。

<template>
  <div class="custom-multiselect">
    <div class="selected-display" @click="toggleDropdown">
      {{ selectedLabels.join(', ') || '请选择' }}
    </div>
    <div class="dropdown" v-show="isOpen">
      <div
        v-for="option in options"
        :key="option.value"
        class="dropdown-item"
      >
        <input
          type="checkbox"
          :id="option.value"
          v-model="selectedValues"
          :value="option.value"
        />
        <label :for="option.value">{{ option.label }}</label>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isOpen: false,
      selectedValues: [],
      options: [
        { value: '1', label: '选项1' },
        { value: '2', label: '选项2' },
        { value: '3', label: '选项3' }
      ]
    };
  },
  computed: {
    selectedLabels() {
      return this.selectedValues.map(value => {
        const option = this.options.find(opt => opt.value === value);
        return option ? option.label : '';
      });
    }
  },
  methods: {
    toggleDropdown() {
      this.isOpen = !this.isOpen;
    }
  }
};
</script>

<style>
.custom-multiselect {
  position: relative;
  width: 200px;
}
.selected-display {
  border: 1px solid #dcdfe6;
  padding: 8px;
  cursor: pointer;
}
.dropdown {
  position: absolute;
  width: 100%;
  border: 1px solid #dcdfe6;
  background: white;
  z-index: 1000;
}
.dropdown-item {
  padding: 8px;
}
</style>

• 通过 v-show 控制下拉框显示/隐藏。
• selectedValues 数组存储选中的值，通过 v-model 绑定到 checkbox。
• 计算属性 selectedLabels 动态显示已选内容的标签。

注意事项

1. 第三方组件库：优先使用成熟组件库（如 Element UI、Ant Design Vue），减少重复工作。
2. 自定义样式：通过 CSS 控制下拉框的定位、动画和交互细节。
3. 数据绑定：多选时 v-model 需绑定数组，确保选项值唯一性。
4. 性能优化：选项较多时考虑虚拟滚动（如 vue-virtual-scroller）。