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

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

演示

思路

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

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

代码

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容