Element-UI checkbox 如何改造成只可单项选择

Element UI  提供 checkbox 默认实现多选或者全选全不选择，RadioButton 实现单项选择功能，但是如果是一个列表的情况下，使用checkbox 的样式进行单选的情况还是很多的，像 el-table 中，checkbox 可以设置为单选或者多选的任何形式，因此记录一下checkbox 改造成单选的实现思路和方法。

我想多研究研究再写，因为中间遇到了很多问题，最后用了一种最笨的办法 害怕点进来看得小伙伴一无所获

我才用的比较笨的方法是，把el-checkbox 的样式 重写到 el-radio 了 ，对就是这样，关于怎么修改数据 让check box 直接实现单选我还需要再研究研究。

论一个程序员思想固化不活跃 能多么影响开发效率 

以下是对自己发的牢骚：

这个功能的实现我最开始的想法就是利用 利用checkbox v-model 的属性 ，通过监听change 进行改变数据 及绑定数据值进行改变每个checkbox 的选中状态 ，我觉着这样一定行，后来发现数据操作改变了，单是页面一直有问题，或者还是实现双选，一直这种方法不可行，就想了别的方法，就是上面的方法。今天想在家多总结一些经验，发现及其简单，最初的思想没有问题，只是代码实现上有问题，我对自己的愚蠢已经佩服的五体投地了。

最终实现思想：

1. checkbox v-model 双向绑定状态值，boolean 类型
2. checkbox 监听change 事件，对于非当前点击的控件，都取消选中状态
3. 注意的是：当前点击的checkbox 控件不要再自主去修改状态，element-ui 封装 当前点击状态改变时 绑定的状态已经同步修改，不要再自己去修改了，我就是想当然的踩了这个坑。

看看最新实现的小demo 吧 ，重写样式的代码真的是太不可取了，为什么实现后会复盘，我觉着checkbox 实现单选应该很常见 ，element-ui 不可能让其实现单选那么复杂，结果原来真的是对自己。。。。。。

小Demo

这么点小问题在开发中一边纠结，一边重写了样式，又一边怀疑实在是太不应该，看来每次遇到问题，问题复盘还是很重要的！