vue实现div多选

实现多选功能的基本思路

在Vue中实现div多选功能，通常需要维护一个选中状态的数组，通过点击事件来切换选中状态。核心逻辑包括数据绑定、事件处理和样式控制。

数据准备与模板结构

创建一个Vue组件，包含可选的div列表和用于存储选中项的数组：

<template>
  <div class="multi-select-container">
    <div 
      v-for="(item, index) in items" 
      :key="index"
      class="selectable-item"
      :class="{ 'selected': selectedItems.includes(item) }"
      @click="toggleSelect(item)"
    >
      {{ item.name }}
    </div>
  </div>
</template>

组件逻辑实现

在script部分定义数据和交互方法：

<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(selected => selected.id === item.id)
      if (index === -1) {
        this.selectedItems.push(item)
      } else {
        this.selectedItems.splice(index, 1)
      }
    }
  }
}
</script>

样式设计

为选中的div添加视觉反馈：

<style>
.selectable-item {
  padding: 10px;
  margin: 5px;
  border: 1px solid #ccc;
  cursor: pointer;
}

.selectable-item.selected {
  background-color: #42b983;
  color: white;
  border-color: #42b983;
}
</style>

高级功能扩展

支持Ctrl/Command键多选：

methods: {
  toggleSelect(item, event) {
    if (event.ctrlKey || event.metaKey) {
      const index = this.selectedItems.findIndex(selected => selected.id === item.id)
      if (index === -1) {
        this.selectedItems.push(item)
      } else {
        this.selectedItems.splice(index, 1)
      }
    } else {
      this.selectedItems = [item]
    }
  }
}

全选/取消全选功能

添加全选和取消全选的控制按钮：

<button @click="selectAll">全选</button>
<button @click="clearSelection">取消全选</button>

对应的方法实现：

methods: {
  selectAll() {
    this.selectedItems = [...this.items]
  },
  clearSelection() {
    this.selectedItems = []
  }
}

与父组件通信

通过$emit将选中的项传递给父组件：

methods: {
  toggleSelect(item) {
    // ...原有的选择逻辑
    this.$emit('selection-change', this.selectedItems)
  }
}

性能优化建议

对于大型列表，使用对象存储选中状态比数组更高效：

data() {
  return {
    selectedMap: {}
  }
},
methods: {
  toggleSelect(item) {
    this.$set(this.selectedMap, item.id, !this.selectedMap[item.id])
  }
}

模板中的class绑定相应调整：

:class="{ 'selected': selectedMap[item.id] }"