vue 实现单选全选

实现单选和全选功能

在Vue中实现单选和全选功能通常涉及数据绑定和事件处理。以下是一个常见的实现方法：

数据准备

定义一个数组来存储选项数据，并为每个选项添加一个selected属性来跟踪选中状态：

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

单选实现

为每个选项添加复选框，并使用v-model绑定到selected属性：

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

全选实现

添加全选复选框，并实现其逻辑：

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

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

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

完整示例

<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.selected"
        @change="updateSelectAll"
      >
      {{ item.name }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '选项1', selected: false },
        { id: 2, name: '选项2', selected: false },
        { id: 3, name: '选项3', selected: false }
      ],
      selectAll: false
    }
  },
  methods: {
    toggleSelectAll() {
      this.items.forEach(item => {
        item.selected = this.selectAll
      })
    },

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

注意事项

• 使用v-model可以简化表单元素的双向绑定
• @change事件确保在值改变时触发相应方法
• every数组方法用于检查是否所有选项都被选中
• 这种方法适用于Vue 2和Vue 3，但在Vue 3中可能需要使用ref或reactive来定义响应式数据