Vue中el-tree树全部展开或收起的实现示例
更新时间：2023年07月23日 16:55:00 作者：小气鬼SYQ
本文主要介绍了Vue中el-tree树全部展开或收起的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
绑定属性expanded，树自带方法this.$refs.tree.store.root.expanded，在mounted方法中给树方法赋值expandAll = false，具体代码实现详情如下：
html代码：
<template>
<el-tree
ref="tree"
:data="showDepData"
expand-on-click-node="false"
:props="{
label: 'name'
}"
node-key="deptId"
highlight-current
:default-expand-all="expanded"
@node-click="changeDepClick"
>
<span slot-scope="{ node, data }">
<i
v-if="node.level == 1"
style="margin-right: 4px"
class="wk wk-customer"
/>{{ data.name }}
</span>
</el-tree>
</template>js代码：
data(){
return{
expanded:false
}
}
mounted(){
//获取树自带的属性并给他赋值false
this.$refs.store.root.expanded = expanded
}到此这篇关于Vue中el-tree树全部展开或收起的实现示例的文章就介绍到这了,更多相关el-tree树展开或收起内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Vue中的百度地图定位BMap.GeolocationControl的用法
BMap.GeolocationControl 是百度地图API中的一个类,用于添加地理定位控件到地图上,以便用户可以通过该控件获取自己的当前位置,本文给大家介绍Vue中的百度地图定位BMap.GeolocationControl的用法,感兴趣的朋友跟随小编一起看看吧2023-10-10
这篇文章主要介绍了Vue实例的选项有哪些，文中讲解非常细致，代码帮助大家更好的学习，感兴趣的朋友可以了解下2020-06-06
Vue的生命周期就是vue实例从创建到销毁的全过程,也就是new Vue()开始就是vue生命周期的开始。Vue实例有⼀个完整的⽣命周期,也就是从开始创建、初始化数据、编译模版、挂载Dom->渲染、更新->渲染、卸载等⼀系列过程,称这是Vue的⽣命周期2022-11-11
这篇文章主要介绍了vant中field组件label属性两端对齐问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
随着项目的发展和复杂性的增加,对 Vuex 进行更深入的了解和使用就变得非常重要,本篇文章将带您探索 Vuex 的进阶使用,包括模块化、命名空间、getter 的高级用法等,需要的朋友可以参考下2023-09-09
在 Vue.js 中,组件之间的数据传递是一个常见的需求,Vue 提供了多种方法来实现这一目标,包括 props、全局事件总线、消息的订阅与发布等,下面我们就来学习一下这些方法的具体实现吧2023-12-12
这篇文章主要介绍了安装vue-cli报错 -4058 的解决方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
这篇文章主要介绍了Vuex之module使用方法及场景说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
下面小编就为大家分享一篇详谈vue+webpack解决css引用图片打包后找不到资源文件的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了解决echarts图表y轴数据间隔过大的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
最新评论