当前位置：首页 > VUE

vue 多选框实现单选

2026-02-21 14:04:42VUE

实现多选框单选功能的方法

在Vue中，可以通过修改多选框组件的逻辑，使其表现为单选行为。以下是几种常见的实现方式：

使用v-model和计算属性

<template>
  <div>
    <label v-for="option in options" :key="option.value">
      <input 
        type="checkbox" 
        :value="option.value" 
        v-model="selectedValue"
        @change="handleChange(option.value)"
      >
      {{ option.label }}
    </label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { value: 'A', label: '选项A' },
        { value: 'B', label: '选项B' },
        { value: 'C', label: '选项C' }
      ],
      selectedValue: []
    }
  },
  methods: {
    handleChange(value) {
      this.selectedValue = [value];
    }
  }
}
</script>

使用radio样式实现单选效果

<template>
  <div>
    <label v-for="option in options" :key="option.value">
      <input 
        type="checkbox" 
        :value="option.value" 
        :checked="selectedValue === option.value"
        @change="selectedValue = option.value"
      >
      {{ option.label }}
    </label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { value: 'A', label: '选项A' },
        { value: 'B', label: '选项B' },
        { value: 'C', label: '选项C' }
      ],
      selectedValue: ''
    }
  }
}
</script>

使用Vue组件库的解决方案

如果使用Element UI等组件库，可以直接利用其提供的单选多选框组件：

<template>
  <el-checkbox-group v-model="selectedValue" @change="handleChange">
    <el-checkbox 
      v-for="option in options" 
      :key="option.value" 
      :label="option.value"
    >
      {{ option.label }}
    </el-checkbox>
  </el-checkbox-group>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { value: 'A', label: '选项A' },
        { value: 'B', label: '选项B' },
        { value: 'C', label: '选项C' }
      ],
      selectedValue: []
    }
  },
  methods: {
    handleChange(value) {
      if (value.length > 1) {
        this.selectedValue = [value[value.length - 1]];
      }
    }
  }
}
</script>

使用CSS样式覆盖实现视觉单选

通过CSS可以强制多选框显示为单选按钮样式：

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

input[type="checkbox"]:checked {
  background-color: #409EFF;
}

以上方法可以根据具体需求选择使用，第一种方法通过JavaScript逻辑控制单选行为，第二种方法更接近原生实现，第三种适用于组件库场景，第四种则通过CSS实现视觉上的单选效果。

vue 多选框实现单选