Element的Select分组全选模式

目录

思路

思路一实现

 搭建基本结构

实现OptionGroup

思路二实现

实现OptionGroup

主逻辑 

使用组件


Select 选择器选择器的分组,如下图所示,我们希望做到的效果是,点击“热门城市”或“城市名”的时候全选分组的options。

Element的Select分组全选模式_第1张图片

思路

思路一:目前的Select 选择器分组OptionGroup的Title只是一个文本DOM,没用其他东西,我们需要给这个文本DOM添加一个点击事件,实现全选的功能。

Element的Select分组全选模式_第2张图片

思路二:直接在中添加一个然后隐藏分组的标题,用多选框中的标题替换分组标题,如下图所示

Element的Select分组全选模式_第3张图片

思路一实现

 搭建基本结构

直接到官网粘贴复制:Element - The world's most popular Vue UI framework

这里的,就是重写的组件





实现OptionGroup

通过vue的extends(继承),Element的OptionGroup,在monuted生命周期方法中,绑定一个点击事件。

新建一个selectGroup.vue文件,去掉