antd的TreeSelect获取父节点的值

博客围绕antd的treeSelect树选择组件展开,该组件数据为树形结构,点击可选择节点并回填到输入框。现有需求是选择子节点时,将父节点和子节点一起回填,用横线隔开。因组件默认不透露父节点信息,通过使用其api中treeNodeLabelProp自定义prop值,整理数据时添加字段拼接父子节点title实现。

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

antd中有个treeSelect树选择组件,数据结构是一个树形结构,当我们点击时候会打开,然后可以选择不同的节点,选中的时候,当前的节点会被回填上输入框

但是现在有个需求是想选择子节点的时候,回填的时候,父节点跟子节点一起回填上,中间加个横线隔起来,仔细看了下文档,发现 treeSelect处于性能角度考虑,默认不透露父节点信息

但是提供了一些方法。

拿过来改了一下

先用他的api中treeNodeLabelProp 自定义一个prop显示的值 

我这里定义的名字叫 completeTitle

然后拿到后台的数据用官方提供的数据,重新整理数据的时候加了个 completeTitle字段,然后把父节点跟子节点的title 拼接一下

 

 最后结果显示

  

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值