antd 使用Tree遇见的几个问题

最新推荐文章于 2024-05-10 10:39:52 发布
最新推荐文章于 2024-05-10 10:39:52 发布
阅读量1.2w 收藏
点赞数
分类专栏： UI js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Radish999/article/details/90485846
版权
js 同时被 2 个专栏收录
21 篇文章 0 订阅
订阅专栏
UI
2 篇文章 0 订阅
订阅专栏

注：此内容是笔者在业务中自己遇到的问题，不具有广泛性，请谨慎参考

1.defaultExpandedKeys （defaultxxxxxxxx）等 只会在第一次有，应使用expandedKeys

 

2.TreeNode添加dataRef 获取子节点数据； eg:

 

3.key ke值应该唯一

 

4.expandedKeys 

设置此参数后，目录的小三角会失效

 

 

可以移步到这里：antd GitHub

 

 

Radish999
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
antd Tree组件 搜索标红 例子
09-09
antd 的Tree组件带搜索，搜索内容标红
ant表格踩坑记录/Note: Tree missing follow keys: ‘undefined‘
qq_41635770的博客
04-17 3503
Note: Tree missing follow keys: 'undefined'
Ant Design 中Tree踩坑
在那山的那边海的那边，有一群程序猿
06-10 1万+
Tree中的api属性有一个defaultExpandAll 这个属性只在第一次渲染的时候有效，也就是说用户刷新页面后或者在这个页面操作完这个组件后重新渲染的时候，这个值将不会有效。 解决办法： expandedKeys={help.treeIdData} onExpand={this.onExpand} 使用expandedKeys属性和onExpand事件进行数据的可控操作 初...
Ant Design - 组件之 Tree树形控件
最新发布
sgjy_15522801752的博客
05-10 832
针对tree树形组件封装了一个树形组件。
树的应用:Tree Traversals Again
qq_45695839的博客
05-10 981
题目来自:pta题目集（无邀请码打不开） 题目如下: An inorder binary tree traversal can be implemented in a non-recursive way with a stack. For example, suppose that when a 6-node binary tree (with the keys numbered from 1 to 6) is traversed, the stack operations are: push(1); pu
react报错index.js:1 Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instan
qq_44748497的博客
11-13 1772
今天遇到了一个警告报错 这是个警告错误，其实代码可以正常运行，但对于一个严格的例子或者正常的项目，不应该有红色的句子，管他是警告还是报错 所以，简单的查了查，有的人说是版本问题，我没这样修改，因为怕改回去又出现别的版本问题，因为刚刚发现event事件改成了Event 所以我修改了index.js文件，把严谨模式去掉了 就是上图<React.StrictMode>中的StrictMode，去掉 不知道对别的有没有影响，但确实没有警告了，如果是 自己写着玩的或者练习的项目，..
Tree组件实现父子节点分离(父子节点自定义逻辑关联)【antd】实现Tree复选，数型数据递归处理
qq_39532524的博客
02-06 3148
大概讲一下如何实现，首先在默认进入时保留一个选中的id集，然后在选择的时候比对本次与上一次的差异，向下查找该节点下所有子节点的id，然后向上查找所有父节点的id，判断本次操作是否勾选来决定子节点集是合并还是移除。项目中我们用的Tree组件一般都是父子节点关联的，但是产品提出了个需求，没办法使用组件自带的逻辑了，只能自定义逻辑进行管理选中节点。
antd-tree.zip
07-24
antd-tree.zip 文件是一个包含使用ANT Design（简称antd）框架中的Tree组件的项目压缩包。antd是基于React的UI库，提供了丰富的组件供开发者构建前端应用。在这个项目中，重点是实现Tree组件的选择控制，以及选中...
antd浏览器直接使用.7z
04-06
标题 "antd浏览器直接使用.7z" 暗示了这个压缩包包含了可以在浏览器环境中直接使用的Ant Design（简称antd）库资源，它是一个基于Vue.js的前端组件库，旨在提供高质量且易于使用的UI解决方案。Ant Design是阿里巴巴...
解决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(), //分 ...
antd遇到的问题汇总
01-08
遇到问题看文档一般都可以得到解决。 table添加滚动条以后表格对不齐 官方文档给出的解释： 若列头与内容不对齐或出现列重复，请指定固定列的宽度 width。如果指定 width 不生效或出现白色垂直空隙，请尝试建议留一...
antd-tree组件带搜索框的使用及踩坑（只标红）
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
04-07 2446
前言： 最近再用Tree组件做项目，记录一下使用方法。 一、预期的效果 antd-tree带搜索框的示例（官网）：官网只是标红 我预期的效果是搜索并且标红（官网示例）。下面是我参考官网的示例写出来的。 二、antd-tree组件带搜索框的使用及踩坑（只标红） import React, { Component } from 'react'; import { Tree, Input } from 'antd'; import styles from '../../assets/index.
ant design vue 组件 Tree
Shiki2147的博客
09-27 1642
ant design vue 组件 Tree 实现效果： 实现代码： <div class="tree"> <a-tree show-icon show-line :load-data="onLoadData1" //展开节点时 @select="treeselect" //点击节点时 @expand="openkeys" :autoExpandParent="false" :tree-data="treeData1" /
AntD-tree组件使用详析
qq_45799465的博客
02-17 6874
一、selectedKeys与onSelect。 二、expandedKeys与onExpand。 三、loadedKeys与onLoad和onExpand。 四、loadData。 五、树节点局部节点刷新。 六、递归获取与修改数据
【Ant Design】Tree树形控件踩坑记录
无限循环
09-13 5296
Ant Design树形控件错误：Warning: Tree node must have a certain key: [undefined]
[积累] git 出现 error Missing tree 的处理办法
热门推荐
What a Chance to Learn
01-11 2万+
问题: 使用 git push 提交时,提示 git push --receive-pack='git receive-pack --reviewer xxx@xxx.cn --reviewer xx@xx.cn' review HEAD:refs/for/master Counting objects: 1, done. Writing objects: 100% (1/1), 24
使用antd的Tree树形控件，子节点没有勾选完全的情况下拿到父节点的值
woke的博客
08-06 2万+
最近在项目中，需要提交一个树形结构的菜单到后台。 我需要把 0-0-0 0-0-0-0 0-0-0-1三个提交出去。但是antd组件中 文档中说到，只有在子节点全部勾选的情况下，父节点才能被勾选。 解决办法： Tree组件提供的onCheck方法中带了两个参数，其中info这个参数中有一个叫做halfCheckedKeys的数组，它专门存贮的半勾选状态的节点（比如子节点...
git 出现 error Missing tree 的处理办法
萨达哈鲁的博客
07-09 3859
问题 公司搭建了 gerrit 代码审核服务器.有较低的概率(目前团队中出现过两例),在 git push 提交时,出现如下错误: git push --receive-pack='git receive-pack --reviewer xxx@xxx.cn --reviewer xx@xx.cn' review HEAD:refs/for/master Counting objects:...
antd tree expandedKeys不生效坑记录
飞扬小阁
01-19 4805
官方要求string[]，注意treeData里的key类型。 我的treeData是接口获取的，在useState赋值后，设置expandedKeys的值未生效。原因是useState是异常赋值，加了一个setTimeout延迟设置expandedKeys。 setTimeout(() => { expandAllKeys(treeJsonData) }, 200) 另外，Tree组年默认展开要写上 <Tree expandedKeys={expa..
使用antd 过滤tree节点
03-31
可以使用antd的Tree组件的filterTreeNode属性来过滤节点。 具体实现步骤如下： 1. 在Tree组件中设置filterTreeNode属性为一个函数，该函数会接收一个TreeNode节点作为参数，返回一个布尔值，表示该节点是否需要显示。 ```jsx <Tree filterTreeNode={(node) => { // TODO: 过滤逻辑 return true; // 返回true表示显示该节点，返回false表示隐藏该节点 }} > {/* Tree节点 */} </Tree> ``` 2. 在filterTreeNode函数中编写过滤逻辑。例如，可以根据节点的title属性来进行过滤。 ```jsx <Tree filterTreeNode={(node) => { const title = node.props.title.toLowerCase(); const keyword = this.state.keyword.toLowerCase(); return title.indexOf(keyword) !== -1; }} > {/* Tree节点 */} </Tree> ``` 3. 在filterTreeNode函数中可以访问组件的state和props属性，可以根据需要进行过滤。 完整示例代码如下： ```jsx import React from 'react'; import { Tree, Input } from 'antd'; const { Search } = Input; const treeData = [ { title: 'Node1', key: '1', children: [ { title: 'Child Node1', key: '1-1', }, { title: 'Child Node2', key: '1-2', }, ], }, { title: 'Node2', key: '2', }, ]; class TreeFilter extends React.Component { state = { keyword: '', }; onSearch = (value) => { this.setState({ keyword: value }); }; render() { const { keyword } = this.state; return ( <div> <Search placeholder="input search text" onSearch={this.onSearch} style={{ width: 200 }} /> <Tree filterTreeNode={(node) => { const title = node.props.title.toLowerCase(); const keyword = this.state.keyword.toLowerCase(); return title.indexOf(keyword) !== -1; }} treeData={treeData} /> </div> ); } } export default TreeFilter; ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值