一个小技巧检查select中option选项

393 阅读1分钟

在我们使用antd或者element组件库,可能会有需要修改select下拉框里option元素样式的情况。
通常在点击Elements tab左上角箭头符号时,展现出来的option元素会因为失焦而隐藏起来。
如下图:

1.gif


并且option选项与select组件没有放在同一个位置。为了方便定位,option通常插入body中,这样要在html中找出对应的option就很不容易。
此时我们可以利用浏览器右键菜单中的检查选项快速定位到我们想要找到的元素。
步骤如下:
  1. 首先将鼠标放在我们想要检查的元素上
  2. 右键,选择<检查>选项
  3. 浏览器自动打开Elements tab并滚动到鼠标所在的元素的位置

效果如下:

2.gif

当我们在对ant-design-vue使用这个方法时会发现,鼠标右键点击检查后,下拉框隐藏起来了。但是此时我们可以发现浏览器同样已经定位到该option元素的位置,我们只需找到包裹option的容器,将display:none取消选中即可

3.gif