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] }"
