vue radio如何实现全选

实现 Vue Radio 全选功能

在 Vue 中实现 Radio 全选功能，可以通过绑定动态数据和计算属性来实现。以下是一种常见的方法：

数据绑定与事件处理

<template>
  <div>
    <label>
      <input type="radio" v-model="selectedOption" value="all" @change="selectAll"> 全选
    </label>
    <label v-for="option in options" :key="option.value">
      <input type="radio" v-model="selectedOption" :value="option.value"> {{ option.label }}
    </label>
  </div>
</template>

脚本部分

<script>
export default {
  data() {
    return {
      options: [
        { value: 'option1', label: '选项1' },
        { value: 'option2', label: '选项2' },
        { value: 'option3', label: '选项3' }
      ],
      selectedOption: ''
    }
  },
  methods: {
    selectAll() {
      this.selectedOption = 'all'
    }
  }
}
</script>

使用计算属性处理全选逻辑

如果需要全选时选中所有选项，可以使用计算属性：

computed: {
  isAllSelected() {
    return this.selectedOptions.length === this.options.length
  }
}

多选与单选结合的实现

如果需要实现类似复选框的全选功能，但使用单选按钮的外观：

<template>
  <div>
    <label>
      <input type="radio" v-model="allSelected" @change="toggleAll"> 全选
    </label>
    <label v-for="option in options" :key="option.value">
      <input type="checkbox" v-model="selectedOptions" :value="option.value"> {{ option.label }}
    </label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { value: 'option1', label: '选项1' },
        { value: 'option2', label: '选项2' },
        { value: 'option3', label: '选项3' }
      ],
      selectedOptions: [],
      allSelected: false
    }
  },
  methods: {
    toggleAll() {
      this.selectedOptions = this.allSelected ? [...this.options.map(opt => opt.value)] : []
    }
  }
}
</script>

样式美化

可以通过 CSS 将复选框样式改为单选按钮外观：

input[type="checkbox"] {
  appearance: none;
  width: 16px;
  height: 16px;
  border: 2px solid #ccc;
  border-radius: 50%;
  outline: none;
  cursor: pointer;
}

input[type="checkbox"]:checked {
  background-color: #42b983;
  border-color: #42b983;
}

以上方法提供了在 Vue 中实现类似全选功能的多种方案，可以根据实际需求选择最适合的实现方式。