vue全选实现
Vue 全选实现方法
在 Vue 中实现全选功能通常涉及列表数据的批量操作，可以通过以下两种常见方式实现：
基于 v-model 和计算属性
使用计算属性处理全选状态和子选项的联动：
<template>
<div>
<input type="checkbox" v-model="selectAll" @change="toggleAll"> 全选
<div v-for="item in items" :key="item.id">
<input type="checkbox" v-model="selectedItems" :value="item.id">
{{ item.name }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, name: '选项1' },
{ id: 2, name: '选项2' },
{ id: 3, name: '选项3' }
],
selectedItems: []
}
},
computed: {
selectAll: {
get() {
return this.selectedItems.length === this.items.length
},
set(value) {
this.selectedItems = value ? this.items.map(item => item.id) : []
}
}
},
methods: {
toggleAll() {
this.selectAll = !this.selectAll
}
}
}
</script>使用事件处理方式
通过手动控制选中状态实现：
<template>
<div>
<input type="checkbox" :checked="allSelected" @change="selectAllItems"> 全选
<div v-for="item in items" :key="item.id">
<input
type="checkbox"
:checked="isSelected(item.id)"
@change="toggleItem(item.id)"
>
{{ item.name }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, name: '选项1' },
{ id: 2, name: '选项2' },
{ id: 3, name: '选项3' }
],
selectedItems: []
}
},
computed: {
allSelected() {
return this.selectedItems.length === this.items.length
}
},
methods: {
isSelected(id) {
return this.selectedItems.includes(id)
},
toggleItem(id) {
const index = this.selectedItems.indexOf(id)
if (index === -1) {
this.selectedItems.push(id)
} else {
this.selectedItems.splice(index, 1)
}
},
selectAllItems(e) {
if (e.target.checked) {
this.selectedItems = this.items.map(item => item.id)
} else {
this.selectedItems = []
}
}
}
}
</script>注意事项
- 确保
v-model绑定的数据类型一致（数组用于多选，布尔值用于单选） - 使用
:value明确每个选项的标识值 - 处理全选状态变化时考虑性能，避免频繁触发计算属性
- 对于大数据列表建议使用虚拟滚动优化性能
两种方式均可实现全选功能，第一种更简洁，第二种更灵活适合复杂场景。根据项目需求选择合适方案。
