element tree 如何全部展开、全部折叠

一、全部展开

只需要将每个父节点的 id 放到 defaultExpendKeys 数组中即可

<el-treeclass="tree-transparent"ref="projectTree":draggable="false":default-expanded-keys="defaultExpandedKeys"@node-click="treeNodeClicked":check-on-click-node="true":data="treeData":highlight-current="true":default-expand-all="false":expand-on-click-node="false"node-key="id">

比如我这个 tree 的结构有三级，就需要将前两级的所有 id 放到 defaultExpandKeys 中


// TREE OPERATION
expandAll(){this.defaultExpandedKeys = []this.treeData.forEach(type => {this.defaultExpandedKeys.push(type.id)type.children.forEach(channel => {this.defaultExpandedKeys.push(channel.id)})})
},

就全部展开了。

二、全部折叠

element-tree 没有全部折叠的方法，但可以变通一下。
将 tree 的数据重新加载一下就可以了，它的默认形态就是折叠的。

比如这个 tree 的数据是 treeData，你可以：

collapseAll(){this.getProjectInfo()  // 重新获取树的数据this.defaultExpandedKeys = []
},

三、结果

element tree 如何全部展开、全部折叠相关推荐

Vue - Element el-table 行的展开与折叠
GitHub Demo 地址在线预览效果图方式一效果图方式二效果图要点使用el-table的span-method方法配合css样式实现展开与折叠方式一代码 <template&g ...
element tree的开发使用
element tree的开发使用 1.树的插槽,实现右边点击三个点打开操作的效果 <div class="el-tree-box"><el-treeclass= ...
java pdf 书签_Java 展开或折叠PDF中的书签
PDF中的书签功能可快速定位到指定阅读位置.对多层书签可根据阅读喜好设置层级展开或折叠.本文将通过Java程序代码介绍如何来实现PDF书签展开或折叠. 程序环境 Spire.Pdf.jar( 免费版3 ...
前端学习（2712）：重读vue电商网站32之让菜单栏展开与折叠
通过点击一个按钮,让侧边栏进行展开与折叠.通过 isCollapse 的值来动态变化侧边栏的宽度. 其中 cursor: pointer 设置是为了让鼠标放在折叠与展开处会有一个手指指向. lette ...
Java折叠_[Java教程]Jquery中菜单的展开和折叠
[Java教程]Jquery中菜单的展开和折叠 0 2018-08-15 16:03:38 标签内容您好:alee 宿舍管理员密码管理修改密码宿舍管理学生宿舍查询学生宿舍新增学生宿舍分配 ...
手风琴式折叠html,基于jQuery实现以手风琴方式展开和折叠导航菜单
本章节分享一段代码实例,它实现了手风琴方式展开和折叠导航菜单效果. 代码实例如下: 代码实例如下: 脚本之家 dl{width:150px;} dl,dd{margin:0;} dt{ backgro ...
JS实现一键展开、折叠所有树节点
在数据分析报表中,通常会有结构树展开的分析报表.在结构树节点较多的时候,逐个进行展开.折叠等操作时,会比较繁琐.费时间.费手劲:此处示例通过点击按钮的方式,使用js实现一键展开.折叠所有的树节点(不限 ...
jQuery 文本段落展开和折叠效果
找了几个感觉这个效果是最好的,最简单的. jQuery 文本段落展开和折叠效果 <!DOCTYPE html> <head> <meta http-equiv=" ...
vue+element tree(树形控件数据格式)组件(1)
vue+element tree(树形控件数据格式)组件(1), 最近做了第一个组内可以使用的组件,虽然是最简版,也废了不少力.各位前辈帮我解决问题,才勉强搞定.让我来记录这个树形组件的编写过程和期间 ...

element tree 如何全部展开、全部折叠

element tree 如何全部展开、全部折叠

一、全部展开

二、全部折叠

三、结果

element tree 如何全部展开、全部折叠相关推荐

最新文章

热门文章