这是我参与「第五届青训营 」伴学笔记创作活动的第 8 天

问题引入

参照项目要求文档给出的要求，并考察了AntD select组件文档，心里想，啊这不就是<select>标签嘛，什么选项分组完全可以用<optiongroup>啊！

表示对这个复杂组件很不以为然，直到我看到了多选！

要知道原生的<select>标签开启了multiple选项之后只会有这个样式

是的，它的输入框不见了，只能看到scroll

我觉得应该是select样式的原因吧，那我去调一下select的样式可不可以，下面的答案来自 MDN文档

答案是：不能直接使用原生样式完全控制select的样式！

那应该怎么办呢？

分析问题

我对antd的文档站开启debug 分别对输入框和下拉菜单进行元素选择

输入框的元素：div

对下拉菜单进行元素选择，稍微有点困难，因为即使将输入框的状态focus等全部强制选择，下拉菜单的显示是由@click事件函数决定的，我猜想它一定会维护一个boolean参数，用于控制下拉菜单的显示，每次点击（无论是页面除下拉菜单外的任何区域，抑或是console中的任意位置）都会改变该boolean参数，以至于无法仅仅在正常预览情况下使用元素选择，看到下拉菜单的元素。

开启console 可以看到每次对于多选的操作，点击右侧的js，可以看到这一步是由该代码所控制

var r = function(i) {
            console.log("selected ".concat(i))
        }

我们打个断点，进入debugger状态，再次点击就发现可以使用元素选择看到下拉菜单的元素也是div容器了。

而select标签的debug却是这样的： 可以看到两者均是div容器，而并非select标签，也就是说——dropselect的多选不是用原生select标签制作的！

解决思路

以上debug的结果也解释了为什么可以实现那么多种的样式，

每一个回显的选项实际上都是一个容器，

在vue3中可以使用v-model双向绑定后通过设定变量比如 const option-selected = ref([''])获得该选择的选项，

这样，选择选项时，即可向该变量数组push一个值，而该数组可以显示在输入框的容器中。