elementUI 中，el-radio 一旦选择了一个之后就无法清空。

例如上图中，除了初始状态 el-radio 绑定值为空的情况，我们无法将两个选项都点击为未选中。

上述例子的代码如下：

<template>
    ...
    <el-radio-group v-model="radio">
       <el-radio-button v-for="(item, index) in radioList"
                        :label="item" 
                        :key="index"
                        >{{ item }}</el-radio-button>
    </el-radio-group>
    ...
</template>

<script>
    ...
    data() {
      return {
        radio: '',
        radioList: ['备选项1', '备选项2'],
      }
    }
    ...
</script>

当el-radio-group 绑定值 radio === '' 时，两个选项都会处于未选中状态。

因此，我们要做的就是修改 el-radio-button 的点击事件，使得某种情况下可以让 radio === '' 。

具体方法如下：

<template>
    ...
    <el-radio-group v-model="radio">
       <el-radio-button v-for="(item, index) in radioList"
                        :label="item" 
                        :key="index"
                        @click.native.prevent="customRadioClickHandler(item)"
                        >{{ item }}</el-radio-button>
    </el-radio-group>
    ...
</template>

<script>
    ...
    data() {
      return {
        radio: '',
        radioList: ['备选项1', '备选项2'],
      }
    },
    methos: {
      // 自定义 radio 点击方法
      customRadioClickHandler(item) {
        this.radio = item === this.radio ? '' : item
        // 判断当前点击的选项值 item 和已经选中的选项值 this.radio 是否相同
        // true: 相同，则将 this.radio 清空，表示没有选项选中
        // false: 不同，本次操作就是普通的选中，直接赋值即可
      },
    },
    ...
</script>

关键点：

1. 给 el-radio-button 添加 @click 方法，同时使用修饰符 .native.prevent 屏蔽 elementUI 框架给的原本点击事件；
2. 将当前点击的选项值 item 作为点击事件函数的参数传入；
3. 将 item 和 el-radio-group 的绑定值 this.radio 作比较，如果相同，意味着本次操作是要取消选择；如果不同，本次操作就是一次普通的选中选项。

如此，既实现了取消选择的功能，又没有影响 el-radio 原本单选的功能。

el-radio-group 样式修改

说到这里，附带记录下 el-radio-group 样式修改过程中碰到的一个问题。

期望实现：

开始操作代码：

<template>
    ...
    <el-radio-group class="custom-radio" v-model="radio">
       <el-radio-button v-for="(item, index) in radioList"
                        :label="item" 
                        :key="index"
                        @click.native.prevent="customRadioClickHandler(item)"
                        >{{ item }}</el-radio-button>
    </el-radio-group>
    ...
</template>

...

<style lang="scss" scoped>
    ...
    .custom-radio {
      ::v-deep .el-radio-button { /* 通过 ::v-deep 设置内部样式 */
        padding-left: 10px; /* 在选项之间设置间距，每个选项都增加左 padding */

        &:first-of-type {
          padding: 0; /* 将第一个左 padding 去掉 */
        }

        .el-radio-button__inner { /* 这里设置想要的按钮样式 */        
          padding: 0 14px;
          font-size: 14px;
          line-height: 24px;
          border-radius: 12px;
        }
      }
    }
    ...
</style>

写完样式编译，没有选中任何选项的时候很开心。

一测试傻眼了！这个外边框是什么鬼？

F12 看看吧：

el-radio-button 选中时会被加上 box-shadow。明白怎么回事就好说了：

<style lang="scss" scoped>
    ...
    .custom-radio {
      ::v-deep .el-radio-button { /* 通过 ::v-deep 设置内部样式 */
        ...
        
        &:focus { /* 把选中时的样式修改掉 */
          box-shadow: none;
        }
      }
    }
    ...
</style>

把 :focus 样式改完收工！

以上就是 el-radio-group 使用过程的一点心得，欢迎友好交流！