vue中实现可自定义添加编辑的checkBox的单选框

平时大多会遇到多选框或者单选框利用element中的checkBox或者直接使用标签元素就解决，现在需要实现，有初始选项但是用户可以自己添加和编辑选项和其中的选择内容。（点击加号出现可编辑Input框，输入后失去焦点或者回车键就完成一个自己编辑内容后添加的选项，且为单选）如图：
实现：
1、首先利用element中复选框组标签写出样式结构（可以自己调整样式更加好看）如下：
根据element提供的方法里面的多个复选框利用标签循环遍历数组得到，
选中项是中双向绑定的数组中的数据。后面根据判断是否显示的input框。

2、定义出所需要的数据字段（当前选中的数组、循环遍历的数组、input框是否显示的标识符、input输入框的内容）

3、在1中绑定相应的事件，并定义方法。（1）点击加号触发点击事件控制标识符，使input框显示。（2）失去焦点时的方法，将input框中的值通过双向绑定给到相应的字段，所有选项的数组使用push方法将其添加到数组中就可以渲染出来定义的选项，并将控制input框的标识符设置为false（隐藏input框），并清空里面的内容，（3）当选择项改变时触发的方法（本来是多选现在要实现单选），
每次将当前选中的数组清空，然后push进选中的值，就可以了