vue实现div多选

Vue 实现 Div 多选的方法

在 Vue 中实现 div 多选功能可以通过以下方法完成，适用于列表、表格或其他需要多选的场景。

基础实现

创建一个数组存储选中的项，通过 v-for 渲染列表，并使用 v-bind:class 动态绑定选中样式。

<template>
  <div>
    <div 
      v-for="item in items" 
      :key="item.id" 
      @click="toggleSelect(item)"
      :class="{ 'selected': selectedItems.includes(item) }"
    >
      {{ 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: {
    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);
      }
    }
  }
}
</script>

<style>
.selected {
  background-color: #e0f7fa;
  border: 1px solid #4dd0e1;
}
</style>

支持 Ctrl/Shift 多选

添加键盘事件监听，实现类似文件管理器的多选逻辑。

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

<script>
export default {
  data() {
    return {
      isCtrlPressed: false,
      lastSelectedIndex: null,
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ],
      selectedItems: []
    }
  },
  methods: {
    handleSelect(item, event) {
      if (this.isCtrlPressed) {
        this.toggleSelect(item);
      } else {
        this.selectedItems = [item];
      }
      this.lastSelectedIndex = this.items.findIndex(i => i.id === item.id);
    },
    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);
      }
    }
  }
}
</script>

使用计算属性优化

通过计算属性可以更方便地处理选中状态和批量操作。

computed: {
  allSelected() {
    return this.selectedItems.length === this.items.length;
  },
  someSelected() {
    return this.selectedItems.length > 0 && !this.allSelected;
  }
},
methods: {
  selectAll() {
    if (this.allSelected) {
      this.selectedItems = [];
    } else {
      this.selectedItems = [...this.items];
    }
  }
}

使用第三方库

对于复杂场景，可以考虑使用专门的 Vue 多选库如 vue-multiselect：

npm install vue-multiselect

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

<script>
import Multiselect from 'vue-multiselect'

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

以上方法可以根据具体需求选择使用，基础实现适合简单场景，而第三方库则提供了更丰富的功能和更好的用户体验。