el-tree 树全部展开或收起

绑定属性expanded,树自带方法this.$refs.tree.store.root.expanded,在mounted方法中给树方法赋值expandAll = false,具体代码实现详情如下:

html代码:

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代码:

java 复制代码
data(){

return{
expanded:false
}

}

mounted(){
//获取树自带的属性并给他赋值false
this.$refs.store.root.expanded = expanded

}
相关推荐
计算机毕设定制辅导-无忧学长7 小时前
《基于Spring Boot的迷游哈游戏综合服务平台的开发》
java·vue.js·spring boot·mysql·迷游哈游戏综合服务平台
恋猫de小郭8 小时前
Flutter 3.50 & Dart 3.14 发布,快来看看有什么更新吧
android·前端·flutter
非优秀程序员16 小时前
第10章 千团出世|《互联网产品恩仇录》
前端
非优秀程序员16 小时前
第11章 小高在对面|《互联网产品恩仇录》
前端
非优秀程序员16 小时前
第14章 只剩美团|《互联网产品恩仇录》
前端
非优秀程序员16 小时前
第09章 老乡何必为难老乡|《互联网产品恩仇录》
前端
非优秀程序员16 小时前
第07章 孙德良的阳谋|《互联网产品恩仇录》
javascript·后端
非优秀程序员16 小时前
第03章 三大门户,烽烟起于瀛海威|《互联网产品恩仇录》
前端
非优秀程序员16 小时前
第04章 邮箱大战,163 与 QQ 的暗战|《互联网产品恩仇录》
java·vue.js·架构
程序员大阳20 小时前
HTML+CSS+JS对话式实战(5)-活动管理页之查看报名名单的实现
javascript·css·html·查看报名名单