vue 实现单选全选

Vue 实现单选和全选功能

在 Vue 中实现单选和全选功能，通常需要结合 v-model 和计算属性来处理选中状态。以下是一个完整的实现示例：

基础数据准备

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

单选功能实现

<ul>
  <li v-for="item in items" :key="item.id">
    <input 
      type="checkbox" 
      v-model="item.selected"
      @change="updateSelectAll"
    >
    {{ item.name }}
  </li>
</ul>

全选功能实现

<input 
  type="checkbox" 
  v-model="selectAll"
  @change="toggleSelectAll"
>
<label>Select All</label>

方法实现

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

  updateSelectAll() {
    this.selectAll = this.items.every(item => item.selected)
  }
}

计算属性优化

可以添加计算属性来简化逻辑：

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

模板优化

<input type="checkbox" v-model="allSelected">
<label>Select All</label>

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

注意事项

• 使用 v-model 时确保双向绑定正确
• 处理数组变化时考虑 Vue 的响应式限制
• 对于大型列表，考虑性能优化

扩展功能

可以添加以下功能增强用户体验：

• 部分选中状态（indeterminate）
• 选中项计数显示
• 批量操作按钮