element-ui radio选中后再次点击取消选中？

"```markdown

Element UI Radio 选中后再次点击取消选中

在 Element UI 中，Radio 组件默认是单选的，不能直接通过再次点击来取消选中状态。但可以通过一些方法实现这一效果。

方法一：使用 v-model 绑定状态

利用 v-model 绑定一个数据属性，通过在点击事件中判断当前选中状态来实现取消选中。

<template>
  <div>
    <el-radio
      v-model=\"selected\"
      :label=\"1\"
      @click=\"toggleSelection(1)\"
    >选项1</el-radio>
    <el-radio
      v-model=\"selected\"
      :label=\"2\"
      @click=\"toggleSelection(2)\"
    >选项2</el-radio>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: null // 初始没有选中的值
    };
  },
  methods: {
    toggleSelection(value) {
      if (this.selected === value) {
        this.selected = null; // 取消选中
      } else {
        this.selected = value; // 选中
      }
    }
  }
};
</script>

方法二：自定义 Radio 组件

创建一个自定义 Radio 组件，通过内部管理选中状态来实现取消选中。

<template>
  <div @click=\"handleClick\">
    <span :class=\"{'radio-checked': isChecked}\">●</span> {{ label }}
  </div>
</template>

<script>
export default {
  props: {
    label: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      isChecked: false
    };
  },
  methods: {
    handleClick() {
      this.isChecked = !this.isChecked; // 切换选中状态
      this.$emit('change', this.isChecked); // 向父组件传递选中状态
    }
  }
};
</script>

<style scoped>
.radio-checked {
  color: blue; /* 选中状态样式 */
}
</style>

方法三：使用 Checkbox 代替 Radio

如果业务逻辑允许，可以使用 Checkbox 组件，它本身支持选中与取消选中。

<template>
  <div>
    <el-checkbox
      v-model=\"isChecked\"
      @change=\"handleCheckboxChange\"
    >选项</el-checkbox>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isChecked: false // 初始状态
    };
  },
  methods: {
    handleCheckboxChange(value) {
      // 处理状态变化
      console.log(value);
    }
  }
};
</script>

总结

通过以上方法，可以实现在 Element UI 中 Radio 选中后再次点击取消选中的效果。选择合适的方法可以根据具体的业务需求和用户体验来决定。