vue实现全选 单选
Vue实现全选与单选功能
全选与单选是表格或列表操作中的常见需求，以下提供两种实现方式，分别基于选项数组管理和组件封装。
基于选项数组管理
数据准备
在Vue组件的data或setup中定义选项列表和选中状态：
data() {
return {
items: [
{ id: 1, name: '选项1' },
{ id: 2, name: '选项2' },
// 更多选项...
],
selectedItems: [] // 存储选中项的id
}
}单选实现
通过v-model绑定单个复选框：
<div v-for="item in items" :key="item.id">
<input
type="checkbox"
:value="item.id"
v-model="selectedItems"
>
{{ item.name }}
</div>全选实现 计算属性判断是否全选，方法切换全选状态：
computed: {
isAllSelected: {
get() {
return this.selectedItems.length === this.items.length
},
set(value) {
this.selectedItems = value
? this.items.map(item => item.id)
: []
}
}
}<input type="checkbox" v-model="isAllSelected"> 全选使用组件封装（推荐）
封装CheckboxGroup组件
<template>
<div>
<checkbox v-model="selectAll">全选</checkbox>
<checkbox
v-for="item in items"
:key="item.id"
v-model="selectedItems"
:value="item.id"
>
{{ item.name }}
</checkbox>
</div>
</template>
<script>
export default {
props: ['items'],
data() {
return { selectedItems: [] }
},
computed: {
selectAll: {
get() {
return this.selectedItems.length === this.items.length
},
set(val) {
this.selectedItems = val ? [...this.items.map(i => i.id)] : []
}
}
}
}
</script>使用组件
<checkbox-group :items="itemList" @change="handleSelectionChange" />注意事项
- 性能优化：当选项数量过大时，使用
v-memo或虚拟滚动优化渲染 - 深层响应：若选项嵌套层级深，确保使用
reactive或Vue.set保持响应性 - 多页全选：结合分页时需额外处理服务端全选逻辑
两种方式均可实现功能，组件化方案更适合复杂场景下的复用。实际开发中可根据项目规模选择合适方案。
