• Tree全部展开/折叠


    <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>

  • 相关阅读:
    《梦段代码》阅读笔记03
    用户场景
    冲刺!
    冲刺!
    周总结8
    冲刺!
    冲刺!
    PMS权限管理和鉴权过程
    PMS构造函数以及apk如何扫描
    PMS的学习之旅
  • 原文地址:https://www.cnblogs.com/miaoyiyan/p/9486210.html
Copyright © 2020-2023  润新知