ant Tree 点击父节点收起所有展开的子节点方式

最新推荐文章于 2024-05-27 14:12:02 发布
最新推荐文章于 2024-05-27 14:12:02 发布
阅读量4k 收藏 5
点赞数 2
分类专栏： react js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40696108/article/details/107916368
版权
本文介绍如何在Ant Design的Tree组件中实现点击父节点时收起所有已展开的子节点。通过分析节点状态的变化，动态控制展开节点，达到跨级收缩的效果。
摘要由CSDN通过智能技术生成

在这里插入图片描述
还记得上次那个要了你半条命才实现的高难度目录树吗？
在这里插入图片描述
在这里插入图片描述

往期回顾：树功能展开节点图标为目录打开，收起为目录关闭图标；节点支持拖拽移动嵌入；树目录支持导入；按类型分类展示标题组成三部分；点击节点对应面包屑导航生成；点击面包屑导航可以展开对应指定树
在这里插入图片描述
内心在不断的嚎叫！！！
是的本来不富裕的家庭今天又有新的饥荒了
介于目前这个树已经这么完美多样了 ，我们再加点功能！
树要支持点击父节点收起所有已展开的子节点，也就是跨级收缩
我。。。。。。。。。

一顿分析后得出结论，既然我做不到让谁都开心的收起，可是介于目前的情况我可以控制谁展开啊。反其道行之！

  //比较出2个数组中不一样的元素
  compareArray = (tep1, tep2) => {
   
    let tep3= [];
    for (let i
最低0.47元/天 解锁文章
Eirice
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
antd的Tree控件实现点击展开功能
weixin_30615767的博客
04-28 5408
antd 的 Tree 控件没有提供点击展开的功能，只能通过左边的三角形实现展开和收起，没办法只好自己实现这个功能。 先看效果 如图实现的是类似 Mac 文件目录形式的结构，有箭头代表是个文件夹，点击展开文件夹，点击外层文件夹可以收起整个文件夹。 首先根据服务器返回的 Json 数据生成树形结构 const data = { name: "root", children: [{ ...
【antd-vue】 a-tree 点击节点文字展开或收缩子节点
qq_46617584的博客
03-28 3041
【antd-vue】 a-tree 点击节点文字展开或收缩子节点
antdesign的树形下拉TreeSelect选择回显父节点/子节点/父子节点
Sylvasylva的博客
05-27 9862
在项目开发中使用TreeSelect组件时，发现同时选择了父节点和子节点，但选择框仅显示出子节点 如果希望控制父子节点的显示，可以配置showCheckedStrategy属性，如下： const Welcome = () => { const [value, setValue] = useState(['0-0-0']); const tProps = { treeData, value, treeCheckable: true,//显示勾选框 .
ant-desigenVue-3.x a-tree-select，点击父节点展开子节点（懒加载）
最新发布
qq_41308779的博客
05-27 372
1.看官网TreeSelect的api。
antdv(a-tree) 点击展开收起功能
uuai
08-17 1268
a-tree设置一键收缩打开功能
【Antv X6】画布中实现父节点可移动，子节点不移动
feifeiyechuan的博客
08-04 1493
【Antv X6】画布中实现父节点可移动，子节点不移动
Vue代码示例，左边Tree，右边对Tree节点配置子表多条数据
04-21
每个节点可能有展开/折叠功能，点击节点时会触发事件，加载或切换对应的子表数据。 2. **子表（Subtable）**：显示与选中Tree节点相关的详细数据，如部门参数。子表可能使用`v-for`指令动态渲染，同时提供增删改查...
flex treeDemo展开滚动到特定的节点
10-10
项目开发中经常需要展开并选择滚动到特定节点，网上也有很多人发帖求方法，特写了一个满足该需要的demo，供参考。
React基于ant无限节点树
10-10
本项目以"React基于ant无限节点树"为主题，意在展示如何利用Ant Design的Tree组件来构建一个可无限加载子节点的树结构。虽然这个实现可能不包含所有功能，但可以作为一个基础模板，开发者可以根据自己的需求进行扩展...
tree第三层节点横向排列.vue
06-18
这个是...rank_v2~rank_blog_default-1-81562278.pc_v2_rank_blog_default&utm_term=element-ui+tree我这个文章的代码。下载了放在自己的vue项目中看结果吧
带复选框的多级目录树，复选框的选择控制子节点父节点 全选和反选
11-13
如果一个父节点的所有子节点都已被选中，那么父节点也应该被选中；反之，如果所有子节点都被取消选中，父节点也应该取消选中。这种机制可以通过遍历子节点并计算选中状态的计数来实现。 5. **实现方法**： 在...
ant-desgin-vue a-tree选中子节点父级节点全选中
weixin_45283339的博客
08-16 2480
需求：在配置权限时，点击关联的父节点都有勾选，不能为半选；点击父级，所有子集能选上，也能反选。找到节点所有关联父级，所有子集。
antdesign Tree 实现 Treeselect 的 SHOW_PARENT
wsh2467991332的博客
08-27 1230
业务及设计需求，不太好直接用 treeselect。 但是需要 show_parent 的功能。 即： 当一个 node 的子元素全部被选中时，选中列表只展示父元素。 核心思想： 排除选中父节点下的所有子节点。 使用： 1.onCheck 会接收到所有选中的节点，包括选中的父节点及子节点。 2.checkedNodesPositions 会展示所有节点的路径。 3. 如果 一个 node 节点的路径包含其他节点，说明该 node 为子节点，排除该节点。 我的解决方法： 双层循环 chec..
ant design 树形控件a-tree-select展开子级选项只能点左侧小三角形，希望能点击title文字就能展开
m0_54281425的博客
02-10 1332
通过小三角元素加一个伪元素让小三角点击范围覆盖右边文字部分，从而点击文字部分控制子级展开/收起，实际还是在操作小三角。另外通过hover来实现文字部分的背景，达到好的体验效果。：ant design 中tree选择器只能通过点击小三角展开子级，体验不太好，希望能点title文字展开/收起。
AntDesignVue中树组件默认不展开所有节点问题解决
CoreCmd的博客
05-21 3399
问题描述 在使用Ant-Design-Vue的树组件时，发现根据文档API设置自动展开所有节点属性后，不起作用。后来发现，是因为在初始化的时候数据还没有，所以设置属性就不生效，应该加个判断，等到有数据后，页面再渲染组件就可以了。 有问题的写法 <a-tree v-model="selectedMenus" :checkable="true" selectable="false" :defaultExpandAll="true" :defaul
ant design of vue之a-table组件自定义展开/收起功能
weixin_47027172的博客
08-07 2874
使用a-table组件实现展开/收起自定义功能，自定义按钮位置 及 内容，点击展开自动收起其他展开项
el-tree 点击父节点展示全部，点击子节点显示对应数据
xiaoming4965的博客
01-17 1733
el-tree 点击父节点展
el-tree设置单选，点击完成后收起
m0_49016709的博客
08-05 1278
当页面布局空间不足的时候可以使用，点击出现树形下拉，选择完成后收回去，这里设置的是树形组件只能单选。 expanded 属性是设置每个节点的展开和收起，遍历每一个节点设置expanded 为false来收起树的节点。setCheckedNodes 设置目前勾选的节点，使用此方法必须提前设置 node-key 属性。node-key是必须加上的，标记每一个节点...
Ant Design Vue中Tree使用异步加载数据 选中父节点就展开子节点
05-30
在Ant Design Vue中的Tree组件中，您可以使用异步加载数据来实现选中父节点就展开子节点的功能。以下是实现该功能的步骤： 1. 定义Tree节点的数据源，包括节点的id、名称、父节点id等属性。 2. 在Tree组件中设置show-expand属性为true，这将显示展开和折叠图标。 3. 设置Tree组件的load-data属性，指定异步加载数据的方法，该方法将根据父节点id加载子节点数据。 4. 在Tree组件的节点模板中，使用 @click.native 事件监听节点的点击事件，并在事件处理程序中判断当前节点是否有子节点，如果有则展开，否则不展开。 下面是一个示例代码，用于实现选中父节点就展开子节点的功能： ```html <template> <a-tree :show-expand="true" :load-data="loadData" :tree-data="treeData" > <template slot-scope="{ data }"> <span :class="{'tree-node-disabled': data.disabled}" @click.native="handleClick(data)" > {{ data.title }} </span> </template> </a-tree> </template> <script> export default { data() { return { treeData: [], }; }, mounted() { this.loadData(null, (data) => { this.treeData = data; }); }, methods: { loadData(parent, callback) { // 根据父节点id加载子节点数据 // ... }, handleClick(node) { // 判断当前节点是否有子节点 if (node.children && node.children.length > 0) { // 展开子节点 node.expanded = !node.expanded; } }, }, }; </script> ``` 在上面的示例代码中，loadData方法用于异步加载节点数据，handleClick方法用于处理节点的点击事件。当用户单击节点时，如果该节点有子节点，则会展开子节点，否则不会展开。请按照您的实际需求进行修改。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值