TreeSelect 搜索后数据默认会展开造成的影响

Forever17s commented 5 years ago

[ ] I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

https://ant.design/components/tree-select-cn/

Steps to reproduce

在使用TreeSelect 组件时数据列过于庞大，所以采用的loadData的方式去远程请求数据。 1551252276 1

但是这样的话搜索后远程加载就会失效。展开箭头会在搜索后消失

然后我在组件的onSearch后获取搜索项去向后台请求数据再改吧TreeData的值。同时设置filterTreeNode: false,。使组件自带的搜索功能失效 rx1 v9fuy q5 mkg uxh

在这您可以看到展开箭头还是没有展现出来。在使用中我是需要这个箭头去继续向远程请求数据的

我通过设置叶子节点属性isLeaf :false发现搜索后还是会展开了搜索结果 8ue p_ _uw7ontk4 sxtwuu

因为调用后台接口比较多，难提供在线demo请见谅。

What is expected?

能适合我当前业务下的场景

What is actually happening?

请问有什么好的解决办法不

Environment	Info
antd	3.13.6
React	16.4.1
System	win7
Browser	chrome

zombieJ commented 5 years ago

给个重现看看，感觉是你的代码逻辑问题。

ant-design-bot commented 5 years ago

Hello @WangGuangCheng2018. Please provide a online reproduction by forking this link https://u.ant.design/codesandbox-repro or a minimal GitHub repository. Issues labeled by Need Reproduce will be closed if no activities in 7 days.

你好 @WangGuangCheng2018, 我们需要你提供一个在线的重现实例以便于我们帮你排查问题。你可以通过点击此处创建一个 codesandbox 或者提供一个最小化的 GitHub 仓库。7 天内未跟进的 issue 将会被自动关闭。

Forever17s commented 5 years ago

抱歉今天才有时间写了个domo

https://codesandbox.io/s/2pkk7zv8kj

如同之前问题中描述的我希望在设置组件的filterTreeNode: false,属性后将不再干预我在搜索框内输入内容后的操作。

但是效果显示还是展开了数据，这样我就没办法去点击展开箭头触发onLoadToSelectData函数去请求数据了

zombieJ commented 5 years ago

在搜索模式下，TreeNode 的 expand 会按照当前的结构来计算，目的是为了防止死循环 loadData。

举个例子，当前有 1000 个 TreeNode，名字都是 node-xxx 的形式。用户在输入 n 后，所有的节点都会展开，会直接把网络堵掉。

如果你想实现搜索还能展开的话，建议用 treeExpandedKeys + onTreeExpand，给每个需要展开的节点加一个 placeholderTreeNode，监听 onTreeExpand 后自行处理数据加载。

Forever17s commented 5 years ago

好吧，我最初的想法是设置filterTreeNode: false属性后能关闭搜索模式，仅提供搜索的回调，然后就不用这么麻烦了。那这个属性设为false的场景是什么样的呢

zombieJ commented 5 years ago

设置为 false 后，Tree 的结构会保持不变，同时不再 filter 掉不匹配的节点。但是对于匹配的节点仍然会添加 .filter-node className。

Forever17s commented 5 years ago

好的，了解谢谢啦

zombieJ commented 5 years ago

: )

zombieJ commented 5 years ago

ref: #16137

panhuajian commented 5 years ago

好的，了解谢谢啦

你好，你是具体怎么解决的，我也遇到了这样的问题。

panhuajian commented 5 years ago

在搜索模式下，TreeNode 的 expand 会按照当前的结构来计算，目的是为了防止死循环 loadData。

举个例子，当前有 1000 个 TreeNode，名字都是 node-xxx 的形式。用户在输入 n 后，所有的节点都会展开，会直接把网络堵掉。

如果你想实现搜索还能展开的话，建议用 treeExpandedKeys + onTreeExpand，给每个需要展开的节点加一个 placeholderTreeNode，监听 onTreeExpand 后自行处理数据加载。

这个问题还是不知道用什么方法解决，现在就是搜索之后所有节点都会默认展开，之后再异步请求子节点之后没有效果，并不会请求

Forever17s commented 5 years ago

搜索之后所有节点都会默认展开，之后再异步请求子节点之后没有效果，并不会请求

@panhuajian 都没有展开箭头了，自然不会触发onLoad

最符合设计角度的方式是按照楼上的方式通过treeExpandedKeys + onTreeExpand去手动控制展开，他说的已经很详细了。另一种方式从产品角度考虑，搜索可以做成远程搜索，结果全部由后台平铺给前端，更加直观给到搜索结果。要根据搜索框有无内容控制展示树形数据还是平铺数据

peterzhai commented 4 years ago

如果我搜索的数据量比较大呢。这个时候，我需要只显示第一级，然后从第二级开始，点击展开。

zfing commented 4 years ago

搜索时，只搜索父节点，并想父节点不展开，现在默认就是搜索一个父节点，就直接展开了这个父节点，这个怎么弄？没找到合适的例子

arthur657834 commented 3 years ago

onTreeExpand={(e) => this.onLoadData(e)} treeExpandedKeys={this.state.treeExpandedKeys} onSearch={(e) => this.onSearch(e)} filterTreeNode={false}

用上面这几个可以搞定，这是个天坑啊啊啊啊啊啊啊啊啊啊

Mamba-working commented 3 years ago

搜索之后所有节点都会默认展开，之后再异步请求子节点之后没有效果，并不会请求

@panhuajian 都没有展开箭头了，自然不会触发onLoad

最符合设计角度的方式是按照楼上的方式通过treeExpandedKeys + onTreeExpand去手动控制展开，他说的已经很详细了。另一种方式从产品角度考虑，搜索可以做成远程搜索，结果全部由后台平铺给前端，更加直观给到搜索结果。要根据搜索框有无内容控制展示树形数据还是平铺数据

但是onTreeExpand的时候只是暴露了key，没有暴露整个nodeData

sunnala commented 3 years ago

onTreeExpand={(e) => this.onLoadData(e)} treeExpandedKeys={this.state.treeExpandedKeys} onSearch={(e) => this.onSearch(e)} filterTreeNode={false}

用上面这几个可以搞定，这是个天坑啊啊啊啊啊啊啊啊啊啊

能不能提供一个在线demo?

ant-design / ant-design