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

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。

// 展开收起
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 j=0; j<this.$refs.navtree.store._getAllNodes().length; j++){
this.$refs.navtree.store._getAllNodes()[j].expanded= this.isExpand;
}
}

Q:elementUI中tree组件动态展开的更多相关文章

  1. 【Egret】中tree组件使用案例

    Egret中tree组件使用案例,包含(文本过多时,自动换行功能) 下面代码结合http://bbs.egret.com/forum.php?mod=viewthread&tid=19028& ...

  2. iView中Tree组件children中动态checked选中后取消勾选再选中无效问题

    如题,我有一个Tree组件,动态更新check选中子级列表的时候,取消勾选了再点击选中时复选框样式不是勾选状态,但是数据已经有了. 对此解决方案是:将初始化时Tree组件data数据深拷贝一遍再去判断 ...

  3. [置顶] Flex中Tree组件无刷新删除节点

    在Tree组件中经常要删除某个节点,而删除之后重新刷新加载该Tree组件会影响整个操作效果和效率,因此,无刷新删除就比较好,既删除了节点也没有刷新tree,而使Tree的状态处于删除之前的状态. 无刷 ...

  4. Easyui中tree组件实现搜索定位功能及展开节点定位

    这几天遇到个input + tree  实现搜索功能的需求,在这里贴出来供大家参考下,如果你有更好的实现效果希望不腻赐教! 首先给大家看看效果     小二 上图  : 需要的部件知识: easyui ...

  5. elment 中tree组件展开所有和收缩所有

    upAll () { // 全部展开 遍历变成true let self = this; // 将没有转换成树的原数据 let treeList = this.sourceData; for (let ...

  6. 解决element-ui 中upload组件使用多个时无法绑定对应的元素

    问题场景 我们在一个列表中分别都需要有upload组件的时候也就涉及到了多个upload同时存在: 因为一般可以在success回调中拿到上传成功的图片已经成功的response,多个也可以,这个没毛 ...

  7. element-ui中upload组件如何传递文件及其他参数

    最近项目用到了vuethink,里面集成了element-ui,之前一直用的是bootstrap框架,对js也是一知半解,然后也用过vue.js,但也是学的不通透的,然后就各种入坑. 下面就分析一下我 ...

  8. Element-ui中ElScrollBar组件滚动条的使用

    在翻看 element-ui官网的文档时,发现其左侧导航和右边的内容超出屏幕时,滚动条的样式比较小巧,通过浏览器审查工具查看,发现它是使用了el-scrollbar的样式,跟element-ui的组件 ...

  9. vue --》elementUI 中 el-table组件 如何实现点击列,让该列高亮显示 ?

    在elmentui官网中,只给了让当前行高亮显示的方法,但是如何让当前列高亮显示呢? <template> <div> <el-table :data="tab ...

随机推荐

  1. 【记录】Http 状态码整理

    Http状态码: 1XX:信息,服务器收到请求,需要请求者继续执行操作 2XX:成功,操作被成功接收并处理 3XX:重定向,需要进一步的操作以完成请求 4XX:客户端错误,请求包含语法错误或无法完成请 ...

  2. k8s-1.16 二进制安装

    环境机器配置: 172.16.153.70 master 172.16.77.121 node1 172.16.77.122 node2 系统初始化 [root@iZbp1c31t0jo4w553hd ...

  3. SparkSQL的一些用法建议和Spark的性能优化

    1.写在前面 Spark是专为大规模数据处理而设计的快速通用的计算引擎,在计算能力上优于MapReduce,被誉为第二代大数据计算框架引擎.Spark采用的是内存计算方式.Spark的四大核心是Spa ...

  4. synchronized(this) 与 synchronized(class) 理解

    1.概念 synchronized 是 Java 中的关键字,是利用锁的机制来实现同步的. 锁机制有如下两种特性: 互斥性:即在同一时间只允许一个线程持有某个对象锁,通过这种特性来实现多线程中的协调机 ...

  5. input限制字符长度 - composition

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. android API版本对应的系统版本及Android获取手机和系统版本等信息的代码

    学了这么久的Android,竟然一直对其API对应的名称关系一值搞不清楚,现在网上认真看了下资料,转载一个觉得写得不错的作者的文章,记下来: [背景] 之前折腾android期间,慢慢地知道了,And ...

  7. Mysql中设置默认时间为系统当前时间

    Mysql中设置默认时间为系统当前时间 数据库设计时会遇到的一种情况:将系统当前时间设成默认值存储 数据库设计编码: CREATE TABLE `test` ( `name` varchar(50) ...

  8. [资料]C#操作SQL Server数据库

    1.概述 ado.net提供了丰富的数据库操作,这些操作可以分为三个步骤: 第一,使用SqlConnection对象连接数据库: 第二,建立SqlCommand对象,负责SQL语句的执行和存储过程的调 ...

  9. Git 学习第二天(三)

    删除文件: 先新建一个test文件到webgit版本库中,然后 git add            git commit 当然,我们可以在文件夹中删除文件,git 也提供了命令 rm file 此时 ...

  10. 剑指offer——04二维数组中的查找

    题目: 数组中唯一只出现一次的数字.在一个数组中除一个数字只出现一次之外,其他数字都出现了三次.请找出那个只出现一次的数字. 题解: 如果一个数字出现三次,那么它的二进制表示的每一位(0或者1)也出现 ...