当前位置：首页 > VUE

vue 多选框实现单选

2026-01-20 22:25:37VUE

Vue 多选框实现单选的方法

在 Vue 中，可以通过修改多选框的逻辑或结合单选框的特性来实现单选效果。以下是几种常见的方法：

使用 `v-model` 和计算属性

通过 v-model 绑定一个变量，并在选择时重置为当前选项，确保只有一个选项被选中。

vue 多选框实现单选

<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: '1', label: 'Option 1' },
        { value: '2', label: 'Option 2' },
        { value: '3', label: 'Option 3' },
      ],
      selectedValue: [],
    };
  },
  methods: {
    handleChange(value) {
      this.selectedValue = [value];
    },
  },
};
</script>

使用单选框样式模拟多选框

通过 CSS 和事件处理，将单选框（radio）的样式改为多选框（checkbox）的外观，同时保留单选逻辑。

vue 多选框实现单选

<template>
  <div>
    <label v-for="option in options" :key="option.value">
      <input 
        type="radio" 
        :value="option.value" 
        v-model="selectedValue" 
        class="checkbox-style"
      />
      {{ option.label }}
    </label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { value: '1', label: 'Option 1' },
        { value: '2', label: 'Option 2' },
        { value: '3', label: 'Option 3' },
      ],
      selectedValue: '',
    };
  },
};
</script>

<style>
.checkbox-style {
  appearance: checkbox;
}
</style>

使用第三方组件库

如果使用组件库（如 Element UI、Ant Design 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: '1', label: 'Option 1' },
        { value: '2', label: 'Option 2' },
        { value: '3', label: 'Option 3' },
      ],
      selectedValue: [],
    };
  },
  methods: {
    handleChange(value) {
      if (value.length > 1) {
        this.selectedValue = [value[value.length - 1]];
      }
    },
  },
};
</script>