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

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>

实现过程中的坑

<style lang="less">中多了一个scoped，导致样式不生效