Q：elementUI中tree组件动态展开

男娘i 2023-10-10 09:41 49阅读 0赞

1，在组件中设置展开收缩开关  default-expand-all="isExpand"

![1147600-20190916091444156-1791022247.png][]

2，展开收起触发按钮

<div class="tree-foot clearfix">
    　　<el-button class="fr" size="mini" plain type="primary" icon="el-icon-caret-top" @click="CloseFun">关闭</el-button>
       <el-button class="fr" size="mini" plain type="primary" icon="el-icon-caret-bottom" @click="ExpandFun">展开</el-button>
    </div>

3，这里采用ref来获取DOM。至于this.$refs.navtree.toString().split(',').length为什么不直接获取长度，因为原型对象上没有length方法（再问，我也不知道了）

// 展开收起
      ExpandFun(){
        console.log(this.$refs.navtree[0].store._getAllNodes().length)
        // let type = Object.prototype.toString.call(this.$refs.navtree)
        this.isExpand = true;
        this.DynamicScaling()
      }
      CloseFun(){
        this.isExpand = false;
        this.DynamicScaling()
      }
      DynamicScaling(){
        for(let i=0;i<this.$refs.navtree.toString().split(',').length; i++){
          for(let j=0; j<this.$refs.navtree[i].store._getAllNodes().length; j++){
            this.$refs.navtree[i].store._getAllNodes()[j].expanded= this.isExpand;
          }
        }
      }

转载于:https://www.cnblogs.com/chuanq/p/11525938.html

[1147600-20190916091444156-1791022247.png]: https://img2018.cnblogs.com/blog/1147600/201909/1147600-20190916091444156-1791022247.png

发表评论取消回复

表情：

评论列表（有 0 条评论，49人围观）

还没有评论，来说两句吧...

相关阅读

相关 antd中Tree组件使用方法个人笔记

一、前言最近在自己自学前端，不清楚学习路线，只能盯着公司的前端项目硬看。公司的前端项目是react框架，Ant Design Pro。之前刚把`router.c

墨蓝/ 2024年03月29日 14:31/ 0 赞/ 71 阅读

相关 Q：elementUI中tree组件动态展开

1，在组件中设置展开收缩开关 default-expand-all="isExpand" ![1147600-20190916091444156-1791022247.pn

男娘i/ 2023年10月10日 09:41/ 0 赞/ 50 阅读

相关 VUE-Element组件（四）tree

一、点击tree，获取点击的item： <template> <div class="container"> <el-card>

深藏阁楼爱情的钟/ 2023年05月21日 07:23/ 0 赞/ 25 阅读

相关 ElementUI组件table展开expand子项动态获取数据时，视图不更新

最近碰到一个新的需求，先是需要获取用户组列表（做成表格），表格项可以展开，在展开的时候动态的获取所展开的用户组底下的用户列表。问题描述起初，我是把表格数据分开来，即

你的名字/ 2022年12月02日 15:05/ 0 赞/ 268 阅读

相关 React 组件封装之 Tree 树形控件

React 组件封装之 Tree 树形控件一、Tree 树形结构二、使用案例三、API 使用指南四、源代码五、总结一、Tre

女爷i/ 2022年11月20日 08:01/ 0 赞/ 1200 阅读

相关 elementui tree 默认展开第一节点

> 代码如下 1.data设置存放id数组 2.默认展开属性赋值存放的id 3.监听watch事件 <template> <div class=

系统管理员/ 2022年11月06日 05:51/ 0 赞/ 711 阅读

相关 antd-vue tree组件，默认展开所有节点（defaultExpandAll）

效果图： ![在这里插入图片描述][20210304161940448.png] 实现方法： html: <a-tree v-if

不念不忘少年蓝@/ 2022年11月05日 07:28/ 0 赞/ 1074 阅读

相关【easyui】tree双击展开

代码如下： $('tree').tree({ url: "${pageContext.request.contextPath}

Dear 丶/ 2022年09月29日 04:22/ 0 赞/ 244 阅读

相关 flex tree 默认展开

这里分两种情况，一种是数据源在MXML文件中，如： <mx:XML id="treeXML" format="e4x"> <root>

分手后的思念是犯贱/ 2022年07月12日 09:14/ 0 赞/ 201 阅读

相关 antd vue tree组件经验记录

目录 1. 默认全部展开 2.替换node名称 3.获取选中node的所有参数和key参数 4.node参数进行数据转换避坑 5.针对tree进行增删改查操作 6.

曾经终败给现在/ 2021年09月24日 12:26/ 0 赞/ 427 阅读