【Vue】el-checkbox多选框实现单选效果，选中一个选项则自动取消其他勾选

在Vue中，要实现el-checkbox（Element UI 多选框组件）的单选效果，即勾选一个选项时自动取消其他选项的选中状态，可以通过v-model绑定相同的变量，并使用computed属性来控制。

以下是一个简单的示例：

<template>
  <div>
    <el-checkbox v-model="radio" :label="1">选项1</el-checkbox>
    <el-checkbox v-model="radio" :label="2">选项2</el-checkbox>
    <el-checkbox v-model="radio" :label="3">选项3</el-checkbox>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      radio: 1, // 初始化为第一个选项的值
    };
  },
  watch: {
    radio(newValue) {
      // 当radio的值变化时，如果发现有其他的选项被选中，则取消选中
      if ([1, 2, 3].filter(v => v !== newValue).some(v => v === this.radio)) {
        this.radio = newValue;
      }
    }
  }
};
</script>

在这个例子中，radio是绑定到每个el-checkbox的变量，它们通过v-model双向绑定到同一个变量上。通过watcher监听radio的变化，当其他选项被选中时，它会立即重置当前的选中项，从而实现单选的效果。