vue实现单选全选

Vue 实现单选和全选功能

在 Vue 中实现单选和全选功能通常需要结合 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
  }
}

单选功能实现

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

全选功能实现

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

全选复选框模板

<div>
  <input 
    type="checkbox" 
    v-model="allItemsSelected"
  >
  Select All
</div>

完整示例

<template>
  <div>
    <div>
      <input 
        type="checkbox" 
        v-model="allItemsSelected"
      >
      Select All
    </div>

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

<script>
export default {
  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
    }
  },
  computed: {
    allItemsSelected: {
      get() {
        return this.items.every(item => item.checked)
      },
      set(value) {
        this.items.forEach(item => {
          item.checked = value
        })
        this.selectAll = value
      }
    }
  },
  methods: {
    updateSelectAll() {
      this.selectAll = this.items.every(item => item.checked)
    }
  }
}
</script>

注意事项

• 使用 v-model 双向绑定简化表单处理
• 计算属性的 setter 用于处理全选状态变化
• every 方法检查是否所有项都被选中
• 单选变化时需要更新全选状态

这种方法提供了响应式的单选和全选功能，适用于大多数 Vue 应用场景。可以根据实际需求调整数据结构和样式。