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

tech2024-11-07  10

平时大多会遇到多选框或者单选框利用element中的checkBox或者直接使用标签元素就解决,现在需要实现,有初始选项但是用户可以自己添加和编辑选项和其中的选择内容。(点击加号出现可编辑Input框,输入后失去焦点或者回车键就完成一个自己编辑内容后添加的选项,且为单选)如图: 实现: 1、首先利用element中复选框组标签写出样式结构(可以自己调整样式更加好看)如下: 根据element提供的方法里面的多个复选框利用标签循环遍历数组得到, 选中项是中双向绑定的数组中的数据。后面根据判断是否显示的input框。 2、定义出所需要的数据字段(当前选中的数组、循环遍历的数组、input框是否显示的标识符、input输入框的内容) 3、在1中绑定相应的事件,并定义方法。(1)点击加号触发点击事件控制标识符,使input框显示。(2)失去焦点时的方法,将input框中的值通过双向绑定给到相应的字段,所有选项的数组使用push方法将其添加到数组中就可以渲染出来定义的选项,并将控制input框的标识符设置为false(隐藏input框),并清空里面的内容,(3)当选择项改变时触发的方法(本来是多选现在要实现单选), 每次将当前选中的数组清空,然后push进选中的值,就可以了

最新回复(0)