解决element ui el-radio单选框再点一次取消选中(改变复选框el-checkbox选中样式）

针对单选框有复选框再次点击一次取消这个问题，没有采取网上所说绑定事件解决，而是另辟蹊径，改动样式。请看下文：

1. 由于复选框element-ui具有点击一次选中，再次点击取消这个功能，因此利用el-checkbox复选框，代替单选框el-radio。

<el-checkbox v-model="checked">备选项</el-checkbox>

data() {
  return {
    checked: true,   //默认选中
  }
}   

2. 但是，想要单选框的样式，如图：

则只改动样式即可。

3. 先把背景变成圆形

在style标签中，注：style标签不可加scope
添加border-radius属性，给方形加圆角

.el-checkbox__inner {
   border-radius: 8px;
}

4. 样式修改

.el-checkbox__inner::after {
    box-sizing: content-box;
    content: "";
    height: 8px;
    width: 8px;
    border-radius: 4px;
    left: 3px;
    position: absolute;
    top: 3px;
    transform: scaleY(0);
    transition: transform .15s ease-in .05s;
    transform-origin: center;
    background-color: #fff;
    border: none;
    }
 .el-checkbox__input.is-checked .el-checkbox__inner::after {
    transform: scaleY(1);
 }

未选中：

选中：

此时，单选框按钮已经有了点击一次选中，再点击一次取消选中的功能了(本质上还是复选框按钮)。