Tree全部展开/折叠

最新推荐文章于 2025-06-23 00:21:59 发布

转载最新推荐文章于 2025-06-23 00:21:59 发布 · 1.2k 阅读

vue 专栏收录该内容

92 篇文章

订阅专栏

博客围绕Tree的展开与折叠相关内容，但具体内容缺失。通常在信息技术中，Tree结构的展开和折叠操作常见于前端界面或数据展示，可方便用户查看和管理数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>

　　<el-tree :data="navs" :props="defaultProps" show-checkbox ref="tree" highlight-current draggable  node-key="navId"   :default-expand-all="defaultExpand"> </el-tree>

　　<el-button @click="setCheckedNodes">展开所有菜单</el-button>

　　<el-button @click="setCheckedKeys">收起所有菜单</el-button>

</template>

<script>

export default { 
　　data() {
　　　　return {

　　　　　　navs:[],   //所有菜单 

　　　　　　  defaultProps: {
　　　　　　　　id:'navId',
　　　　　　　　children: 'snavList',
　　　　　　　　label: 'navName',
　　　　　　　　disabled:'navOffOn' 
　　　　　　  },

 

　　　　　　defaultExpand:true,  //默认展开所有节点

　　　　}

　　},

　　methods: {

　　　　setCheckedKeys() {　　
　　　　　　this.defaultExpand=false;
　　　　　　for(var i=0;i<this.$refs.tree.store._getAllNodes().length;i++){
　　　　　　　　this.$refs.tree.store._getAllNodes()[i].expanded=this.defaultExpand;
　　　　　　}
　　　　},

　　　　setCheckedNodes() {
　　　　　　this.defaultExpand=true; //展开所有节点
　　　　　　for(var i=0;i<this.$refs.tree.store._getAllNodes().length;i++){
　　　　　　　　this.$refs.tree.store._getAllNodes()[i].expanded=this.defaultExpand;
　　　　　　}
　　　　}

　　}

}

</script>