【Vue Antdv】a-select选择器的选中和高亮的样式错乱

Vue2.7
Antdv版本：1.7.8
官网

问题详情

​​
如上图，我明明选中的是Lucy，为什么在下拉展开的时候把Jack也给高亮显示了？

排查记录

1. 看到这个问题的时候，首先去了官网看了一下官方的示例是否有这个问题。发现并没有。
2. 在项目中其他地方也看了一下是否有类似问题，发现也没有。
3. 最后就只能从自身写法下手排查了，以下梳理了一下排查的大致思路

思路一

第一反应是代码写法的问题，想到是不是v-model给错值了。但转念就把这个可能性pass了。因为上图可以看出Lucy的确有选中效果，并不会说给错值的情况。

后面为了验证思路正确性，还专门反复输出了一下选中值的传递。并没有问题，这里不做过多描述了

思路二

既然数据方面没有问题，那就需要从样式方面下手，看下到底是哪个样式生效的。主要想排查是否是项目中有什么样式在影响antdv的样式，排查发现还是antdv自身的样式在作怪

思路三

经过了前两步之后，并没有看到写法上有什么问题，同时也不存在项目中有哪个地方在影响antdv原生的样式。到了这一步，想到一开始看到项目中其他地方并没有此问题，那就对比下项目中有问题和没有问题两者之间的使用写法进行了一下对比。

结果就不贴了，使用方式完全一致，毕竟都是根据官方文档的用法；

但除了使用方式外，还真想到另外一个点不一样，那就是传递的数据

最终结果

经过重重排查，最终到数据这一层的时候的确发现一个点，这个点到没有经历多少阻碍，完全是下意识的直觉。那就是在传输的数据中有一项值为0

[
	{ value: 2，label: 'Jack' },
	{ value: 1，label: 'Anna' },
	{ value: 0，label: 'Lucy' } // 问题就在选中的值是这项value为0的值，如果选中第一项Jack或第二项Anna都不会出现此篇文章的问题
]

最终经过验证，的确是值为Number类型的0（String类型的就不会）的时候，如果选中0的选项，那么在下拉显示的时候找不到对应的选项，就会默认把第一个选项给高亮了。

但是你说找不到选项吧？为啥选中的效果还在？
只能说明选中样式的逻辑和高亮样式的逻辑不一样。具体内部是怎么实现的就没有再去深入研究了，既然找到了问题点，那就先把问题给解决掉。

解决方案

方案一

经过上面验证也得出只有值为Number类型的0才会出现这种问题。那就想办法把值都改为String类型，只不过需要考虑不能改动源数据的类型，可能接口就需要Number类型。所以还需要做一层转换…

方案二

一的改动也可以实现，只不过不想在去处理数据。于是就想着直接在样式层面处理一下，他既然识别0的时候给加错乱了。那我就在值为0的时候把错乱给纠正过来

if (open && val === 0) { // select如果选中值是数值0，且数据不在第一个，会默认第一个选中
    const selIndex = props.dataList.findIndex(item => (item.value === selectVal.value))

    if (selIndex > 0) { // 当前选中不是第一个
          const dropId = selectRef.value.$el.querySelector('.ant-select-selection').getAttribute('aria-controls')
          // 找到所有的元素
          const $dropCont = document.querySelector(`.ant-select-dropdown-content[id="${dropId}"]`)
          // 给移除掉就好了
          $dropCont?.querySelector('.ant-select-dropdown-menu-item:first-child')?.classList.remove('ant-select-dropdown-menu-item-active')
    }
}

小结

整篇下来，主要的不是最终解决方案，但是定位此问题的过程。问题找到之后，那解决问题的的方法就各式各样了。