vue实现单选全选
实现单选与全选功能
在Vue中实现单选和全选功能，可以通过数据绑定和计算属性来完成。以下是一个完整的实现方案：
数据准备
data() {
return {
items: [
{ id: 1, name: '选项1', checked: false },
{ id: 2, name: '选项2', checked: false },
{ id: 3, name: '选项3', checked: false }
],
selectAll: false
}
}单选功能实现
<div v-for="item in items" :key="item.id">
<input
type="checkbox"
v-model="item.checked"
@change="updateSelectAll">
{{ item.name }}
</div>全选功能实现
<input
type="checkbox"
v-model="selectAll"
@change="toggleSelectAll">
全选方法实现
methods: {
toggleSelectAll() {
this.items.forEach(item => {
item.checked = this.selectAll
})
},
updateSelectAll() {
this.selectAll = this.items.every(item => item.checked)
}
}计算选中项
如果需要获取当前选中的项目，可以添加计算属性：
computed: {
selectedItems() {
return this.items.filter(item => item.checked)
}
}完整示例代码
<template>
<div>
<div>
<input
type="checkbox"
v-model="selectAll"
@change="toggleSelectAll">
全选
</div>
<div v-for="item in items" :key="item.id">
<input
type="checkbox"
v-model="item.checked"
@change="updateSelectAll">
{{ item.name }}
</div>
<div>已选择: {{ selectedItems.length }} 项</div>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, name: '选项1', checked: false },
{ id: 2, name: '选项2', checked: false },
{ id: 3, name: '选项3', checked: false }
],
selectAll: false
}
},
methods: {
toggleSelectAll() {
this.items.forEach(item => {
item.checked = this.selectAll
})
},
updateSelectAll() {
this.selectAll = this.items.every(item => item.checked)
}
},
computed: {
selectedItems() {
return this.items.filter(item => item.checked)
}
}
}
</script>注意事项
- 使用v-model双向绑定简化表单处理
- 通过计算属性获取选中项提高性能
- 每次单选操作后检查是否需要更新全选状态
- 全选操作会同步更新所有单选状态
- 确保key属性唯一以优化列表渲染性能
这种实现方式简洁高效，利用了Vue的响应式特性，适合大多数单选/全选场景需求。
