Ant Design of Vue a-tree-select 下拉样式调整踩坑

 
目的
优化搜索结果样式，使查询结果更清晰

实现环境
ant-design-vue：^1.6.5
vue：^2.6.10

最终实现代码
<a-tree-select
    show-search
    :placeholder="'请选择'"
    treeNodeFilterProp="title"
    allow-clear
    dropdownClassName="dropdown-class"
    tree-default-expand-all
    :tree-data="treeData"
    @change="onChange"
/>

<style lang="less" >
  .dropdown-class{
    // 查询结果样式优化（F12查看需要修改的class）
    .ant-select-tree li.filter-node > span{
      font-size: 20px;
      color: #44f0e9;
    }
  }
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
实现过程中的坑
<style lang="less">中多了一个scoped，导致样式不生效
————————————————

                            版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
                        
原文链接：https://blog.csdn.net/qq_41780827/article/details/139855559