elementUI Checkbox 多选框互斥事件

在Element UI中，如果你想要实现多个Checkbox之间的互斥效果，即当一个Checkbox被选中时，其他的Checkbox都应该被取消选中，你可以通过v-model绑定相同的数据模型来实现这一点。

以下是一个简单的例子，展示了如何使用Element UI的Checkbox组件实现互斥效果：

<template>
  <div>
    <el-checkbox v-model="checked" @change="handleCheck">Checkbox 1</el-checkbox>
    <el-checkbox v-model="checked" @change="handleCheck">Checkbox 2</el-checkbox>
    <el-checkbox v-model="checked" @change="handleCheck">Checkbox 3</el-checkbox>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      checked: false
    };
  },
  methods: {
    handleCheck(value) {
      // 当任何一个Checkbox被选中时，取消其他的选中状态
      if (value) {
        this.$nextTick(() => {
          this.checked = value; // 确保只有一个被选中
        });
      }
    }
  }
};
</script>

在这个例子中，所有的Checkbox都绑定到了同一个名为checked的数据属性上。当任何一个Checkbox的状态发生改变时，handleCheck方法会被触发，并检查Checkbox的新状态。如果其被选中，则通过this.$nextTick确保DOM更新后再将其他的Checkbox设置为未选中状态，从而实现互斥效果。