ant design 树形控件a-tree-select展开子级选项只能点左侧小三角形，希望能点击title文字就能展开

梦翼93

已于 2023-02-15 18:25:50 修改

阅读量1.4k

点赞数 4

分类专栏：前端浏览器文章标签：前端 javascript vue css anti-design-vue

于 2023-02-10 13:25:22 首次发布

本文链接：https://blog.csdn.net/m0_54281425/article/details/128968297

版权

前端同时被 2 个专栏收录

12 篇文章

订阅专栏

浏览器

8 篇文章

订阅专栏

文章介绍了如何通过CSS调整Antdesign中的tree选择器，增加伪元素扩大点击区域，使得用户可以点击标题文字来控制子级节点的展开和收起，同时通过hover效果提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
问题：ant design 中tree选择器只能通过点击小三角展开子级，体验不太好，希望能点title文字展开/收起。
解决：

.ant-select-tree-switcher {
  position: relative;
}
.ant-select-tree-switcher_open::before,
.ant-select-tree-switcher_close::before {
  content: '';
  position: absolute;
  right: -200px;
  top: 0;
  left: 0;
  bottom: 0;
}
.ant-select-tree-switcher_close:hover ~ .ant-select-tree-node-content-wrapper-close {
  background-color: #e6f7ff;
  transition: background-color 0.3s ease;
}
.ant-select-tree-switcher_open:hover ~ .ant-select-tree-node-content-wrapper {
  background-color: #e6f7ff;
  transition: background-color 0.3s ease;
}

通过小三角元素加一个伪元素让小三角点击范围覆盖右边文字部分，从而点击文字部分控制子级展开/收起，实际还是在操作小三角。另外通过hover来实现文字部分的背景，达到好的体验效果。

如果需要深度选择就在选择器前加/deep/,如下：

/deep/ .ant-select-tree-switcher {
  position: relative;
}

/deep/ .ant-select-tree-switcher_open::before {
  content: '';
  position: absolute;
  right: -200px;
  top: 0;
  left: 0;
  bottom: 0;
}
/deep/ .ant-select-tree-switcher_close::before {
  content: '';
  position: absolute;
  right: -200px;
  top: 0;
  left: 0;
  bottom: 0;
}
/deep/ .ant-select-tree-switcher_close:hover ~ .ant-select-tree-node-content-wrapper-close {
    background-color: #E6F7FF;
    transition: background-color 0.3s ease;
  }
/deep/.ant-select-tree-switcher_open:hover ~ .ant-select-tree-node-content-wrapper {
    background-color: #E6F7FF;
    transition: background-color 0.3s ease;
  }