elementui的下拉框选择问题(当你选中一个以后,下拉框的那个选项消失,删除的话,下拉框中又出现这个选项)

select下拉框的问题
之前做了一个功能,觉得可以写下来加深一下印象,好吧废话不多说,上内容
elementui的下拉框选择问题(当你选中一个以后,下拉框的那个选项消失,删除的话,下拉框中又出现这个选项)_第1张图片
这边有两个增加按钮,当我选择点击增加参数时,会出现一个下拉框
elementui的下拉框选择问题(当你选中一个以后,下拉框的那个选项消失,删除的话,下拉框中又出现这个选项)_第2张图片
当我选择其中一个选项的时候,下拉列表框中那个数据就被隐藏了,当我再次增加一个参数的时候,那个下拉列表框中的数据是隐藏的,比如:
elementui的下拉框选择问题(当你选中一个以后,下拉框的那个选项消失,删除的话,下拉框中又出现这个选项)_第3张图片
看,下面的下拉列表框没有设备名称这个选项了,这样做是为了限制输入框的个数,接下来献上代码:
首先给每一个选项一个开关,用来控制显示隐藏
elementui的下拉框选择问题(当你选中一个以后,下拉框的那个选项消失,删除的话,下拉框中又出现这个选项)_第4张图片
然后深度监听输入的参数
elementui的下拉框选择问题(当你选中一个以后,下拉框的那个选项消失,删除的话,下拉框中又出现这个选项)_第5张图片
首先改变this指向,然后遍历一遍下拉框的数组,因为所有选项都放在一个数组里面,首先在坚挺的函数中传入一个形参,指选中的参数,然后遍历下拉框中的每一个数组,给每一个数组的开关都是true,然后遍历一下选中的这些option,再在这些选中的options中遍历一下下拉框中的options,双重遍历,然后进行判断,如果选中的options和下拉框中的options相同,那么,就让当前选项在下拉框中隐藏。这样就能够实现你每添加一项,下拉框中就少一项。
当你删除某一个选项的时候,代码如下:
elementui的下拉框选择问题(当你选中一个以后,下拉框的那个选项消失,删除的话,下拉框中又出现这个选项)_第6张图片
当你删除的值与下拉框中的值相同,那么就让下拉框中的值出现。

你可能感兴趣的:(select的下拉框)