vue实现点击多选

Vue 实现点击多选功能

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

使用 v-model 和数组绑定

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

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

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

使用自定义点击事件

通过手动管理选中状态，可以更灵活地控制多选逻辑。

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

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
      ],
      selectedItems: []
    }
  },
  methods: {
    toggleSelection(id) {
      const index = this.selectedItems.indexOf(id)
      if (index === -1) {
        this.selectedItems.push(id)
      } else {
        this.selectedItems.splice(index, 1)
      }
    }
  }
}
</script>

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

使用第三方库

如果需要更复杂的功能（如全选、反选等），可以使用第三方库如 vue-multiselect。

安装：

npm install vue-multiselect

使用：

<template>
  <multiselect
    v-model="selected"
    :options="options"
    :multiple="true"
    :close-on-select="false"
    placeholder="Select items"
  ></multiselect>
</template>

<script>
import Multiselect from 'vue-multiselect'

export default {
  components: { Multiselect },
  data() {
    return {
      selected: [],
      options: ['Option 1', 'Option 2', 'Option 3']
    }
  }
}
</script>

键盘辅助多选

通过监听键盘事件（如 Shift 或 Ctrl 键），可以实现类似桌面应用的多选体验。

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

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
      ],
      selectedItems: [],
      lastSelected: null
    }
  },
  methods: {
    handleClick(event, id) {
      if (event.shiftKey && this.lastSelected) {
        const start = this.items.findIndex(item => item.id === this.lastSelected)
        const end = this.items.findIndex(item => item.id === id)
        const range = this.items.slice(
          Math.min(start, end),
          Math.max(start, end) + 1
        )
        this.selectedItems = range.map(item => item.id)
      } else if (event.ctrlKey || event.metaKey) {
        const index = this.selectedItems.indexOf(id)
        if (index === -1) {
          this.selectedItems.push(id)
        } else {
          this.selectedItems.splice(index, 1)
        }
      } else {
        this.selectedItems = [id]
      }
      this.lastSelected = id
    }
  }
}
</script>

以上方法可以根据具体需求选择使用，从简单的复选框绑定到复杂的键盘交互多选都能满足不同场景的需求。