vue实现全选 单选

实现全选与单选功能

在Vue中实现全选和单选功能，通常需要结合复选框（checkbox）和v-model指令来管理选中状态。以下是具体实现方法：

基础数据准备

定义数据模型，包括列表数据和全选状态：

data() {
  return {
    items: [
      { id: 1, name: 'Item 1', checked: false },
      { id: 2, name: 'Item 2', checked: false },
      { id: 3, name: 'Item 3', checked: false }
    ],
    selectAll: false
  }
}

全选功能实现

创建全选方法，控制所有项目的选中状态：

methods: {
  toggleSelectAll() {
    this.items.forEach(item => {
      item.checked = this.selectAll
    })
  }
}

模板中使用v-model绑定全选复选框：

<input type="checkbox" v-model="selectAll" @change="toggleSelectAll"> 全选

单选功能实现

为每个项目添加复选框并绑定checked状态：

<div v-for="item in items" :key="item.id">
  <input type="checkbox" v-model="item.checked"> {{ item.name }}
</div>

全选状态同步

添加计算属性，当所有项目选中时自动勾选全选：

computed: {
  isAllSelected() {
    return this.items.every(item => item.checked)
  }
}

观察isAllSelected变化，更新selectAll状态：

watch: {
  isAllSelected(newVal) {
    this.selectAll = newVal
  }
}

优化版本（使用计算属性）

更简洁的实现方式，使用计算属性的setter：

computed: {
  selectAll: {
    get() {
      return this.items.every(item => item.checked)
    },
    set(value) {
      this.items.forEach(item => {
        item.checked = value
      })
    }
  }
}

模板简化为：

<input type="checkbox" v-model="selectAll"> 全选
<div v-for="item in items" :key="item.id">
  <input type="checkbox" v-model="item.checked"> {{ item.name }}
</div>

获取选中项目

添加方法获取当前选中的项目：

methods: {
  getSelectedItems() {
    return this.items.filter(item => item.checked)
  }
}

这种方法提供了完整的全选/单选交互，同时保持代码简洁和响应式更新。根据实际需求，可以进一步扩展功能，如添加中间状态（部分选中）或与后端API交互。