react TreeSelect loadData 异步加载搜索 只加载一次问题

最新推荐文章于 2024-06-20 11:09:26 发布
最新推荐文章于 2024-06-20 11:09:26 发布
阅读量3k 收藏 1
点赞数
文章标签： javascript reactjs react.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38938009/article/details/121369455
版权

 先说下思路，tree插件是有一个loadedKeys属性的，是可以直接进行操作的，TreeSelect插件不支持这个属性，我们需要手写一个，全局设置一个变量，在loadData异步加载的时候，把当前加载的code存起来

 在节点展开的时候对搜索值进行判断，判断是搜索状态还是加载状态，是否已经加载过这个节点，为了直观展示我就简写了哈

还有说的一点就是isLeaf需要设置false，否则前面的小图标不显示

还有就是在onchange和onselect里面需要对treeExpandedKey进行清空操作，以保证每次都可以进行展开

 

单枪匹马你别怕y
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
vue2 ant 1.7.8 treeSelect 异步加载
2301_77774368的博客
10-25 306
ant1.7.8 treeSelect组件异步加载
antd of vue treeSelect——异步加载
who_become_gods的博客
07-16 2372
<a-tree-select style="width: 90%" allowClear :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" :treeData="personData" showSearch :load-data="onLoadData" /> onLoadData(treeNode){ var that = this return new Pro
vue3 antd Tree控件异步数据加载，对树增删改更新整个树的数据时，会导致节点的展开按钮消失，节点再也无法展开
weixin_45440916的博客
03-20 1304
Tree控件异步数据加载，对树增删改更新整个树的数据时，会导致节点的展开按钮消失，节点再也无法展开，tree提供的loadData属性，可添加loadedKeys属性，这样可将加载的节点装入其中，在编辑或添加等操作之后也不会出现节点消失的情况。原本为多层树形结构，选择某级进行编辑或者添加后重新调用getOneNode()函数进行刷新，一级节点展开按钮消失，再点也无反应。由于只是绑定loadedKeys，但是一直为[]，点击叶子节点时会导致onLoad方法一直调用，从而进入死循环。
Treeselect是介绍及使用（梳理了我使用这个组件遇到的大部分问题）
最新发布
qq_71214810的博客
06-20 4066
这里梳理了我使用这个Treeselect组件遇到的大部分问题，希望大家多多补充，感谢
React antd 4.x 异步加载treeSelect 返显
qq_34353904的博客
09-07 1648
使用antd 4.x treeSelect 异步加载， 自动展开返显
ant-design-vue(1.7.8)的trseeSelect组件异步加载子节点
m0_66475027的博客
07-13 1485
【代码】【无标题】
antd tree异步加载，只有首次点击加载，再次点击不加载问题
weixin_44874595的博客
12-27 7672
场景：最近做tree异步加载的功能，但是发现只有我第一次点击的时候，会调用方法加载，后面再点击都不会再加载。 需求：每次点击都会加载 解决方法： 用onExpand，onLoad，loadedKeys，expandedKeys <Tree showIcon blockNode loadData={this.onLoadData} onLoad={this.onLoad} // 节点加载完毕时触发 onSelect={this.onSelectTree} selecte
详解react-router4 异步加载路由两种方法
08-29
React Router 4 是一个功能强大且灵活的路由管理库，它提供了多种路由管理方式，包括异步加载路由。异步加载路由是一种可以按需加载路由的方式，使得应用程序的启动速度变得更快，用户体验也更好。在本篇文章中，...
react TreeSelect异步加载树
05-24
1. 首先，在 TreeSelect 组件中添加一个 `loadData` 属性，将其设置为一个异步函数，用于加载树的子节点数据。 2. 在 `loadData` 函数中，根据当前节点的 key 或其他标识符向后端发送异步请求，获取该节点的子节点...
手把手教您实现react异步加载高阶组件
10-15
`react-loadable` 是一个高阶组件，它专门用来解决React中异步加载组件的问题。该库通过捕获 `import()` 函数的调用，并在组件加载时返回指定的加载组件，实现了懒加载的功能。 下面是一个具体的实现示例： ```...
react TreeSelect异步加载树案例
05-24
可以参考下面这个示例，在 React 中使用 Ant Design 的 TreeSelect 组件实现异步加载树结构： ```jsx import React, { useState, useEffect } from 'react'; import { TreeSelect } from 'antd'; const { TreeNode...
js TreeMenu 异步加载树形控件
05-05
这个控件是我在网上下载的，但它没有异步加载，所以自己就用jquery改写了下，现在拿出来共享下
tree-select:React树选择
04-28
rc-树选择 React TreeSelect组件 屏幕截图 发展 npm install npm start 例子 在线示例： : 安装 原料药 TreeSelect道具 名称 描述 类型 默认 班级名称 根dom节点的其他CSS类 细绳 '' 前缀Cls 前缀类 细绳 '' 动画片 下拉动画名称。 现在仅支持向上滑动 细绳 '' transitionName 下拉CSS动画名称 细绳 '' choiceTransitionName 多种模式下选定项目CSS动画名称 细绳 '' dropdownMatchSelectWidth 下拉式选单是否与select相同。 默认设置的min-width与输入相同 布尔 -- dropdownClassName 附加的className应用于下拉菜单 细绳 -- dropdownStyle 应用于下拉菜单的其他样
react-router4 配合webpack require.ensure 实现异步加载的示例
08-28
"react-router4 配合webpack require.ensure 实现异步加载" 本文主要介绍了react-router4 配合webpack require.ensure 实现异步加载的示例，以下是相关知识点： 1. react-router4: react-router4 是一个流行的前端...
VueTreeselect 实现懒加载、多选、异步、回显。。。
m0_63818409的博客
09-19 6808
是一个基于 Vue.js 的树形选择组件，专门用于在前端创建可交互的树形选择器。它具有树形结构、多选和单选、搜索和过滤、异步加载、自定义模板等特点和功能。项目上第一次使用VueTreeselect实现懒加载、多选、异步、回显等功能时，摸索了很久。以此记录，若有不足望纠正补充。安装：npm install --save @riophae/vue-treeselect。
在使用Jquery的load方法加载时，只加载第一次的问题解决方法
欣的专栏
09-01 7439
.load方法没有设置 cache参数 默认true  解决办法几个：  1.使用.ajax方法并设置 cache参数为false（本人使用的是这种，试了可行）     $.ajaxSetup ({ cache: false }); 在每次执行load方法前执行，注意不能设置为全局属性 2.修改jquery.js中，load方法，load方法也是调用的.ajax，增加cache:fal
React---组件异步加载
Ammy的成长
12-03 427
Suspense组件，一部加载过程中显示的组件 lazy 函数时异步加载组建的函数 import React, { Suspense, lazy } from 'react'; const About = lazy(() => import('./routes/About')); const App = () => ( <Suspense fallback={<d...
解决element-ui中el-tree懒加载load只执行一次问题
weixin_47267851的博客
05-31 1705
解决element-ui中el-tree懒加载load只执行一次问题
react 异步加载代码组件
DaXiong1024的博客
09-08 257
import React, { Component } from 'react' /** * @description: 封装react 页面级组件按需异步加载函数 * @param {any} importComponent * @return {*} */ function asyncComponent(importComponent: any) { class AsyncComponent extends Component<any, any> { construct
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值