tree组件实现折叠与展开功能（方式2 - visible计算属性）

原创

已于 2024-07-25 06:15:21 修改 · 440 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#自定义Tree #vue3 #vite #computed

于 2024-07-18 21:33:02 首次发布

本示例节选自vue3最新开源组件实战教程大纲（持续更新中）的tree组件开发部分。考察Vue3 Composition API形式的计算属性的用法，computed可以单独用在ts文件中，实现ts的计算属性类型的定义。

父节点属性

在IFlatTreeNode中定义父节点，以取代之前定义的parentId

export interface IFlatTreeNode extends ITreeNode {
   
   
  parent?: IFlatTreeNode // 关联父节点
  ...
}

调整generateFlatTree的入参，pid改为parent，要调整的地方：

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Java小卷

关注关注

10
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

vue2+elementUI：实现tree横向滚动问题，el-tree怎么设置树节点内容溢出的滚动条？Tree树组件设置横向和纵向滚动条多种解决方案与示例代码（解决横向滚动条不显示、设置无效没用问题）

高级前端工程师

06-22

2652

element-UI el-tree横向滚动条，el-tree 横向滚动条，elementui树组件Tree横向滚动条不出来，vue项目中el-tree ：横向和纵向滚动条设置，添加横向滚动条，elementUI - tree横向滚动问题，vue项目中el-tree 支持横向和纵向滚动条设置，element 树组件 tree 横向纵向滚动条，element-ui中使用el-tree横向滚动条不显示，不产生横向滚动条，css设置无效，滚动条不出来怎么办，解决Element-ui-Tree组件无法出现横向滚动条

vue3+element-plus：实现tree横向滚动问题，el-tree怎么设置树节点内容溢出的滚动条？Tree树组件设置横向和纵向滚动条多种解决方案与代码（解决横向滚动条不显示、设置无效没用）

高级前端工程师

06-22

3022

element plus el-tree横向滚动条，el-tree 横向滚动条，element-plus树组件Tree横向滚动条不出来，vue3项目中el-tree ：横向和纵向滚动条设置，添加横向滚动条，element - tree横向滚动问题，vue3项目中el-tree 支持横向和纵向滚动条设置，element 树组件 tree 横向纵向滚动条，element-plus中使用el-tree横向滚动条不显示，不产生横向滚动条，css设置无效，滚动条不出来怎么办，解决Element-plus-Tree组件

参与评论您还未登录，请先登录后发表或查看评论

vue自定义折叠Tree，自定义折叠树

weixin_43728978的博客

07-17

1027

自定义vue折叠tree

Vue ElementUI el-tree 动态设置节点是否显示

前端技术

02-24

2734

Vue ElementUI el-tree 动态设置节点是否显示

learn-vue2-org-tree 树型结构的使用

岂不闻

11-03

4442

vue2-org-tree 用于创建和显示组织结构树状图，可视化组织结构，例如公司的层级、部门之间的关系、团队层级关系这些，支持折叠，展开，自定义icon等

element折叠、展开树

qq_45991812的博客

05-11

566

注意：其中“orgTreeRef”为机构树设置的ref。1、需要设置“node-key”，否则无法获取子节点。

tree组件实现折叠与展开功能（方式1 - expandedTree计算属性）

felix_alone2012的博客

07-18

938

本示例考察响应式对象列表封装和computed计算属性的使用，以及数组reduce方法实现结构化树拍平处理的核心逻辑。

ElementUI el-tree节点筛选最佳实践：实现与优化

![ElementUI el-tree节点筛选最佳实践：实现与优化]...ElementUI的el-tree组件是前端开发中常用的一种树形控件，尤其在呈现复杂层级数据时显

el-tree饿了么elementUI tree树结构插件设置全部展开折叠

我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。

05-16

1102

node-key="id" //加入这个属性，否者代码无法生效。

js-tree:js搜索树状折叠插件

05-15

js-tree js树状折叠插件,主要实现树状结构的展示效果，附加搜索功能.如下图demo效果，样式可以自定义。 npm install --save js-tree-search 如何使用 let jsTree = new JsTree($('#container')); let data = [ { "id": 9, "parentId": 0, "text": "我是顶级3" }, { "id": 1, "parentId": 0, "text": "我是顶级", "child": [ { "id": 2, "parentId": 1,

Js操作树节点自动折叠展开的几种方法

12-10

1、方法一代码如下: var tree = L5.getCmp(‘edocOutfileRelationTree’); //增加选择树，节点自动折叠 tree.on(“click”, function(node,e){ node.getUI().toggleCheck(true); }); tree.root.expand(); 2、方法二代码如下: var tree = L5.getCmp(‘orgstrutree’); //增加选择树，节点自动折叠 tree.on(“click”, function(node,e){ if(node.expanded==false){ node.

TreeTable,用于展开/折叠table的行

05-22

TreeTable,用于展开/折叠table的行:比如,类别展示

JS实现一键展开、折叠所有树节点

王世洪的博客

03-23

3871

在数据分析报表中，通常会有结构树展开的分析报表。在结构树节点较多的时候，逐个进行展开、折叠等操作时，会比较繁琐、费时间、费手劲；此处示例通过点击按钮的方式，使用js实现一键展开、折叠所有的树节点（不限制层数） 1、设置JS事件在需要事件展开/折叠的单元格/按钮上，添加“超级链接”，分别键入JavaScript事件控制：展开事件： $('.x-treenode-unexpand').trigger('click'); 折叠事件： $(".x-treenode-expand").

Js操作树节点自动折叠展开

Shaniya

04-23

4716

<% String processId=request.getParameter("processId"); %> 文件全景图 {collapsible:true,split:true,animFloat:false,autoHide:false,useSplitTips:true,bodyStyle:'padding:0px;'}

vue v-if点击展开收起效果

weixin_46733392的博客

03-16

681

<template v-if="collapse"> </template> collapse: false, <a v-font="14" class="ivu-ml-8" @click="collapse = !collapse"> <template v-if="!collapse"> 展开 <Ic...

D3.js学习笔记十五:D3.js树图(Tree)展开和折叠