elementUI 单选按钮再次点击后取消选

原本需求是，做一个类似与淘宝那种多重筛选的功能，如下图 

自己又是个小白，想这找找现成的组件直接使用，无奈搜索引擎找了一大圈，也没找到，没办法只能自己写了；

想好实现逻辑：

1、单选框radio选中之后会改变vue中data.cpuUsageRate的值

2、给单选框radio加上点击按钮操作方法：当点击此时的radio按钮时获取当前值，对其进行对比判断来改变vue中data.cpuUsageRate值，

将原生组件绑定到组件要使用native修饰符，可以理解为该修饰符的作用就是把一个vue组件转化为一个普通的HTML标签，但对于普通的HTML标签是没作用的；

vue文件里template下的html代码如下：

<el-row>
<el-col :span="24">
<label for="cpuUsageRate">CPU使用率：</label>
<el-radio-group id="cpuUsageRate" v-model="cpuUsageRate">
<el-radio-button @click.native.prevent="changeValue('10')" label="10">CPU &lt; 10%</el-radio-button>
<el-radio-button @click.native.prevent="changeValue('20')" label="20">CPU &lt; 20%</el-radio-button>
<el-radio-button @click.native.prevent="changeValue('30')" label="30">CPU &lt; 30%</el-radio-button>
<el-radio-button @click.native.prevent="changeValue('50')" label="50">CPU &lt; 50%</el-radio-button>
</el-radio-group>
</el-col>
</el-row>

vue  js模块的methods里的点击按钮事件方法如下

changeValue(v) {
this.cpuUsageRate = v == this.cpuUsageRate ? "" : v 
}

方法上加了.native 和 .prevent 后，样式会有些改变，添加以下css

.el-radio-button:focus:not(.is-focus):not(:active) {
-webkit-box-shadow: 0 0 2px 2px #fff;
box-shadow: 0 0 2px 2px #fff;
}
.el-radio-button__inner {
border-left: 1px solid #d8dce5
}

由于不会制作动态图片，只能发个静态的凑活看下了

来源：oschina

链接：https://my.oschina.net/u/4314546/blog/4313877