当前位置：首页 > VUE

vue点击实现多选

2026-01-17 02:21:08VUE

Vue 实现多选功能的方法

在 Vue 中实现多选功能可以通过多种方式完成，以下介绍几种常见的实现方法：

使用 v-model 绑定数组

通过 v-model 绑定一个数组，当复选框被选中时，会自动将值添加到数组中。

<template>
  <div>
    <label v-for="option in options" :key="option.value">
      <input 
        type="checkbox" 
        v-model="selectedItems" 
        :value="option.value"
      >
      {{ option.label }}
    </label>
    <p>已选: {{ selectedItems }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { value: 'apple', label: '苹果' },
        { value: 'banana', label: '香蕉' },
        { value: 'orange', label: '橘子' }
      ],
      selectedItems: []
    }
  }
}
</script>

自定义多选逻辑

对于更复杂的场景，可以手动处理选择逻辑。

<template>
  <div>
    <div 
      v-for="item in items" 
      :key="item.id"
      @click="toggleSelect(item)"
      :class="{ 'selected': isSelected(item) }"
    >
      {{ item.name }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '选项1' },
        { id: 2, name: '选项2' },
        { id: 3, name: '选项3' }
      ],
      selectedItems: []
    }
  },
  methods: {
    toggleSelect(item) {
      const index = this.selectedItems.findIndex(i => i.id === item.id)
      if (index === -1) {
        this.selectedItems.push(item)
      } else {
        this.selectedItems.splice(index, 1)
      }
    },
    isSelected(item) {
      return this.selectedItems.some(i => i.id === item.id)
    }
  }
}
</script>

<style>
.selected {
  background-color: #eee;
}
</style>

使用第三方组件

对于更专业的多选需求，可以考虑使用第三方组件库：

Element UI 的多选框组


<template>
<el-checkbox-group v-model="checkedCities">
 <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
</el-checkbox-group>
</template>

export default { data() { return { cities: ['上海', '北京', '广州', '深圳'], checkedCities: [] } } } ```

Vuetify 的选择控件


<template>
<v-select
 v-model="selected"
 :items="items"
 label="选择项"
 multiple
></v-select>
</template>

export default { data() { return { items: ['选项1', '选项2', '选项3'], selected: [] } } } ```

键盘辅助多选

实现类似桌面应用的多选体验（Shift/Ctrl+点击）：

<template>
  <div>
    <ul>
      <li 
        v-for="(item, index) in items" 
        :key="index"
        @click="handleClick($event, index)"
        :class="{ 'selected': selectedIndices.includes(index) }"
      >
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['项目1', '项目2', '项目3', '项目4', '项目5'],
      selectedIndices: [],
      lastSelectedIndex: null
    }
  },
  methods: {
    handleClick(event, index) {
      if (event.shiftKey && this.lastSelectedIndex !== null) {
        const start = Math.min(this.lastSelectedIndex, index)
        const end = Math.max(this.lastSelectedIndex, index)
        this.selectedIndices = Array.from({length: end - start + 1}, (_, i) => start + i)
      } else if (event.ctrlKey || event.metaKey) {
        const position = this.selectedIndices.indexOf(index)
        if (position === -1) {
          this.selectedIndices.push(index)
        } else {
          this.selectedIndices.splice(position, 1)
        }
      } else {
        this.selectedIndices = [index]
      }
      this.lastSelectedIndex = index
    }
  }
}
</script>

以上方法涵盖了从基础到进阶的多选实现方式，可以根据具体项目需求选择合适的方法。对于简单场景，使用 v-model 绑定数组是最简洁的方案；对于需要更多控制的情况，自定义选择逻辑提供了更大的灵活性；而使用成熟的UI组件库可以快速实现专业的多选功能。

vue点击实现多选