Vue.js中如何实现无需Ctrl键的多选select组件？

当然可以实现，我们只需要监听<option>的点击事件，阻止原生多选的默认行为，然后手动维护选中项数组即可。

修改后的完整代码： #

<template>
  <select multiple v-model="selected">
      <option 
        v-for="item in items" 
        :key="item.id"
        :value="item.id"
        @click.prevent="toggleSelection(item)"
      >
        {{ item.name }}
      </option>
  </select>
</template>

<script>
export default {
  name: 'SelectMultiple',
  props: {
    items: {
      type: Array,
      required: true,
      // 确保每个item都有唯一标识
      validator: (value) => {
        return value.every(item => item.hasOwnProperty('id'));
      }
    },
  },
  data() {
    return {
      selected: ['option1']
    }
  },
  methods: {
    toggleSelection(item) {
      const itemId = item.id;
      const index = this.selected.indexOf(itemId);
      if (index > -1) {
        // 已选中则移除
        this.selected.splice(index, 1);
      } else {
        // 未选中则添加
        this.selected.push(itemId);
      }
    }
  }
}
</script>

关键说明： #

• @click.prevent：阻止原生<select multiple>的默认多选逻辑（默认需按住Ctrl）
• toggleSelection方法：手动切换选项的选中状态，通过判断项的唯一标识是否在selected数组中，来执行添加/移除操作
• :value="item.id"：确保选项值与selected数组元素类型一致，保证选中状态匹配
• props校验：确保传入的items每个元素都有唯一id，避免选中逻辑出现混乱

修改后，点击任意选项即可直接切换它的选中状态，无需按住Ctrl键。

内容的提问来源于stack exchange，提问作者user3465752