当前位置：首页 > VUE

vue radio如何实现全选

2026-02-21 16:38:00VUE

实现 Vue Radio 全选功能

在 Vue 中实现 Radio 的全选功能需要结合 v-model 和计算属性来处理选中状态。以下是具体实现方法：

使用 v-model 绑定数据

创建一个数组来存储选中的值，并使用 v-model 绑定到 Radio 组：

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

设置数据与计算属性

在 Vue 实例中定义数据和计算属性：

<script>
export default {
  data() {
    return {
      options: ['选项1', '选项2', '选项3'],
      selectedOption: '',
      selectedOptions: []
    }
  },
  methods: {
    selectAll() {
      this.selectedOptions = [...this.options];
    }
  }
}
</script>

处理全选逻辑

当选择“全选”时，将所有选项添加到 selectedOptions 数组中：

methods: {
  selectAll() {
    this.selectedOptions = this.options.slice();
  }
}

监听 Radio 变化

添加监听器确保选择单个选项时取消全选状态：

watch: {
  selectedOptions(newVal) {
    if (newVal.length !== this.options.length) {
      this.selectedOption = '';
    }
  }
}

完整示例代码

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

<script>
export default {
  data() {
    return {
      options: ['选项1', '选项2', '选项3'],
      selectedOption: '',
      selectedOptions: []
    }
  },
  methods: {
    selectAll() {
      this.selectedOptions = this.options.slice();
    }
  },
  watch: {
    selectedOptions(newVal) {
      if (newVal.length !== this.options.length) {
        this.selectedOption = '';
      }
    }
  }
}
</script>

替代方案：使用复选框模拟全选

如果需求允许，使用复选框可能更符合用户习惯：

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

<script>
export default {
  data() {
    return {
      options: ['选项1', '选项2', '选项3'],
      selectedOptions: [],
      selectAll: false
    }
  },
  methods: {
    toggleAll() {
      this.selectedOptions = this.selectAll ? [...this.options] : [];
    }
  },
  watch: {
    selectedOptions(newVal) {
      this.selectAll = newVal.length === this.options.length;
    }
  }
}
</script>

这两种方法都能实现全选功能，第一种严格使用 Radio 控件，第二种使用更常见的复选框模式。根据实际需求选择合适方案。

vue radio如何实现全选