antd的TreeSelect获取父节点的值

最新推荐文章于 2024-05-03 15:43:02 发布
最新推荐文章于 2024-05-03 15:43:02 发布
阅读量3.6k 收藏 6
点赞数
文章标签： 大数据
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/z2823930772/article/details/125638640
版权

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

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

但是提供了一些方法。

拿过来改了一下

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

我这里定义的名字叫 completeTitle

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

 

 最后结果显示

  

前端一鸟
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js如何获取兄弟、父类等节点
10-26
本文为大家介绍下js获取兄弟、父类等节点的方法，感兴趣的朋友可以参考下
React antd tree树组件 - 父子节点没有自动关联情况下 - 显示半选、全选状态以及实现父子节点互动
m0_46364033的博客
08-14 2247
如Ant Design Vue 中所示，并没有提供获取半选节点的方法，当设置checked和checkStrictly时，父子节点也不再自动关联了。
el-tree控件获取当前被选中的节点,以及父节点（祖节点）
m0_65518920的博客
03-22 619
初始设置checkStrictly为true,让父子不关联，因为我这里接口反显的时候会把父的信息也反显过来，关联了就会把父的所有子级全部勾选中。这里最大的问题就是反显的问题了，一开始我设置checkStrictly为false,然后在拿父祖的信息毫无。然后将全选的和半选的放进一个数组里，就能拿到实现我们要的， 获取当前被选中的节点,以及父节点（祖节点）了。在拿到后端传回的父子数据渲染页面时，我们希望不要关联。问题，以为轻松解决了，试了几遍就发现反显的时候因为返回了父的信息，所以会把所有的子项全。
antd TreeSelect 组件如何获取父级ID
南城
12-15 924
请根据你的实际数据结构和需求调整此代码。如果你的树形数据没有包含父节点的引用，你可能需要先处理原始数据以构建这种关系。：确保每个节点数据中包含对其父节点的引用。例如，你可以在每个节点对象中添加一个。组件中，当选择子节点时获取其父节点的 ID，你需要利用。的数据以树形结构存储，每个节点都有一个唯一的。事件回调中，你可以根据选中的节点的。组件提供的数据和事件回调。在 Ant Design 的。）和一个指向其父节点的引用。查找其对应的父节点 ID。
ant design tree 数据模式 和 获取父节点
热门推荐
LoveEate的博客
12-04 1万+
数据的结构： const nodeList=[ {id:1,name:树节点一",children:[{id:2,name:树节点二",children:[{id:3,name:树节点三"}]}]}， {id:4,name:树节点四"}， {id:5,name:树节点五",children:[{id:2,name:树节点二"}]}， ] 写法： <Tree defaultExp...
解决antd datepicker 获取时间默认少8个小时的问题
01-18
1、扩展日期格式化方法 Date.prototype.format = function (fmt) { let o = { M+: this.getMonth() + 1, //月份 d+: this.getDate(), //日 h+: this.getHours(), //小时 m+: this.getMinutes(), //分 s+: this.getSeconds(), //秒 q+: Math.floor((this.getMonth() + 3
antd Tree树形控件——不完全选中子节点后想要获取父节点的值，与后端交互
z止于至善的博客
12-26 5963
最近有一个权限树的需求，而且树的结构比较深，想要实现，在不完全选中子节点后能够获取父节点的值，一并传给后端。 不完全选中子节点后想要获取父节点的值 如图：选中【新增用户】和【批量导入】时，想要把【用户列表】和【用户管理】的id也传给后端。 通过阅读API文档， onCheck是复选框选中时触发，其中第二个参数是一个事件对象，他的返回值打印出来如下： 其中，有一个属性halfCheckedKeys就是关联父节点的值。这样，我们可以轻松的拿到值了，和选中节点拼接起来一起传给后台就好了。 onCheck =
Antd的Tree 树形控件实现单选与获取选中后的父元素目录
qq_45919348的博客
11-17 3740
antd、a-tree、目录树、目录树的单选与多选、父元素获取、
antd tree树形控件 onCheck单选并准确获取父子节点
weixin_52014110的博客
01-27 6099
antd tree树形控件 onCheck单选并准确获取父子节点
【ant-design】Tree组件子节点不完全勾选获取父节点的值
Cainannan1995的博客
04-20 765
需要把协同管理的ID一起传给后台，但是ant的tree组件的checkedvalue只会选择到请假管理的ID，所以我们需要在执行check的时候。但是这样做的话，当我们在编辑的时候后台数据也会返回给我们一个父节点ID导致组件会默认全部勾选，所以我们要对返回的选中id组合进行筛选。我们在实际操作tree组件和后台交互的时候一般都是需要将父节点传过去，如图。
Ant Design Vue Tree 树形获取父节点信息
小布丁儿的博客
07-26 5032
有幸用过这个ant组件一言难尽！了解到这个组件默认不透露父节点信息所以处理是真的麻烦，我这个需求是选中子节点要把它的父节点展示出来！开始用了很多捷径都没成功，最后用循环加递归踏踏实实的去找到它的父节点。...
antd-DatePicker组件获取时间值,及相关设置方式
01-21
DatePicker组件默认语言是英语，需要设置为中文的话，需要安装moment。 import moment from “moment”; ... format属性，设置日期的格式，如“2020-02-28”。 设置日期 选择日期是今天之前【包含今天】 ...
antd Form组件方法getFieldsValue获取自定义组件的值操作
01-18
onChange方法, 子组件调用此方法，可将值传给父组件，从而Form可拿到自定义组件的值 value属性，获得初始值 2、组件调用 像Form表单内的组件一样调用，就可以了 补充知识：Ant Design Pro，用setFieldsValue方法，...
antd多选下拉框一行展示的实现方式
01-21
我们都知道antd的select多选时，如果下拉框宽度不足，则自动浮动到下一行将下拉框撑大，但是这回影响到页面的整体布局。 我们期望的效果是，下拉框只显示一行的值，超出一行的部分自动隐藏。 下面有2种方案来实现这...
大数据面试题 —— Spark数据倾斜及其解决方案
hu_wei123的博客
04-27 1127
有的时候，我们可能会遇到大数据计算中一个最棘手的问题 ——数据倾斜，此时 Spark 作业的性能会比期望差很多。数据倾斜调优，就是使用各种技术方案解决不同类型的数据倾斜问题，以保证 Spark 作业的性能。
10分钟了解数据质量管理-奥斯汀格里芬 Apache Griffin
搞数据
04-28 1150
Griffin是一个开源的大数据数据质量解决方案，由eBay开源，它支持批处理和流模式两种数据质量检测方式，是一个基于Hadoop和Spark建立的数据质量服务平台 (DQSP)。它提供了一个全面的框架来处理不同的任务，例如定义数据质量模型、执行数据质量测量、自动化数据分析和验证，以及跨多个数据系统的统一数据质量可视化。Griffin于2016年12月进入Apache孵化器，Apache软件基金会2018年12月12日正式宣布Apache Griffin毕业成为Apache顶级项目。
ruoyi漏洞总结
最新发布
qq_59468567的博客
05-03 326
baseurl 就有了，有的是全的 url，大多数是只给个 baseurl：prod-api，这类。js 下面有个 app.xxxxxx(一些个字母数字).js，直接里面搜。如果页面访问显示不正常，可添加默认访问路径尝试是否显示正常。若依有个特点，密码可能在前台直接显示，点击并能够成功登录。监控中存在大量接口路径，可通过未授权获取更多敏感信息在。图标和登录页面及验证码处的样式识别出若依。认证失败，无法访问系统资源。进行替换实现登录系统。数据库存在未授权访问。
ES集群分布式查询原理
weixin_53676834的博客
04-30 706
当新增文档时，应该保存到不同分片，保证数据均衡，那么coordinating node如何确定数据该存储到哪个分片呢？2）对id做hash运算，假如得到的是2，则应该存储到shard-2。3）shard-2的主分片在node3节点，将数据路由到node3。5）同步给shard-2的副本replica-2，在node2节点。6）返回结果给coordinating-node节点。1）新增一个id=1的文档。
云计算知识点-02
lv785的博客
04-27 1715
DataNode是HDFS文件系统的工作节点，DataNode会按照客户端或者是NameNode的调度来存储和检索数据，并定期向NameNode发送它所存储的数据块列表，DataNode是文件系统中真正存储数据的地方。通过这种虚拟化可以减少服务器的数量，提高服务器的使用效率，可以在一定程度上摆脱物理上的空间限制，实现随时随地随需的自由掌控。Glance(镜像服务组件)，其作用是：提供虚拟机镜像的存储，查询和检索功能，为nova进行服务，依赖于存储服务（存储镜像本身）和数据库服务（存储镜像相关的数据）。
vue antd treeselect获取父节点
06-13
要获取Vue Antd Treeselect的父节点，您可以使用`before-select`事件。 在这个事件中，您可以访问将要被选中的节点和它的父节点。您可以将父节点存储在Vue组件的数据中，以便在需要时可以访问它。 以下是一个示例代码： ``` <template> <treeselect :options="options" @before-select="handleBeforeSelect" ></treeselect> </template> <script> export default { data() { return { parent: null, options: [ { id: 1, label: "Node 1", children: [ { id: 2, label: "Node 1.1" }, { id: 3, label: "Node 1.2" } ] }, { id: 4, label: "Node 2", children: [ { id: 5, label: "Node 2.1" }, { id: 6, label: "Node 2.2" } ] } ] }; }, methods: { handleBeforeSelect(node, instance) { this.parent = instance.getNode(node.parent); } } }; </script> ``` 在这个例子中，我们定义了一个`parent`数据属性来存储选中节点的父节点。在`handleBeforeSelect`方法中，我们将选中节点的父节点存储在`parent`属性中。在需要访问父节点时，我们可以直接使用`parent`属性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值