element-ui 多选下拉框分组选择互斥

在开发的时候可能会遇到这样的需求：一个多选的下拉框里有很多分组，因为业务需求导致分组之内的选项可以多选，而一旦选中不同分组的选项，就需要清除之前其他分组的选中值。如下：

演示

思路

• 在 vue.watch 中监听，然后比较新值和旧值，找到新选中的值
• 如果没有新选中的值（取消选中了某个值），就什么都不做
• 找到新选中值所在的分组
• 和当前的所有选中值比较，去除所有不在新值所在分组中的选项
• 和当前的所有选中值比较，如果数量不一样就说明有选项被移除了，更新回 vue.data。这一步一定要比较，不然会导致一直循环调用这个 watch 函数。

这么实现可以满足后续需求，即使增删了分组数量和分组中的选项也不会影响功能。

代码

代码及在线预览请参见 codepen - 多选下拉框分组互斥。