账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    element-ui 怎样动态控制树的全部折叠和展开
    52
    0

    1.点击按钮,全部展开,然后el-tree则全部展开
    2.点击按钮,全部折叠,然后el-tree则全部折叠
    3.使用 :default-expand-all="isExpand",动态改变isExpand的值,值变化,树却没有变化
    4.怎么实现?
    html代码:
    <el-tree

      class="filter-tree treeoverflow"
      :data="data2"
      :props="defaultProps"
      highlight-current
      :filter-node-method="filterNode"
      @node-click="handleNodeClick"
      :default-expand-all="isExpand"
      ref="tree2">
    </el-tree>

    js代码:

      isExpand(){
      console.log('执行isExpand()');
      this.czlx=this.$store.state.ysml.czlx;
      if( this.czlx=='111') {
        console.log("全部折叠"+this.czlx);
        this.iscolspann=false;
        return false;
      }else if( this.czlx=='222'){
        console.log("全部展开");
        this.iscolspann=true;
        return true;
      }else{
        return false;
      }
    },
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 梧桐听雨 普通会员 1楼

      Element-UI 提供了一个动态显示和隐藏组件的方法,你可以使用 treeListactiveKeys 属性来动态控制树的折叠和展开。以下是一个简单的示例:

      ```html <el-tree ref="tree" :data="data" show-props="true" @select="handleSelect" mode="checkbox" node-key="key" :max-level="2" :active-key="activeKeys"

      ```

      在上面的代码中,activeKeys 属性是一个数组,包含了你想要展开或折叠的节点的 key 属性。mode="checkbox" 表示当用户点击节点时,选择节点。node-key="key" 表示在树中的每个节点都有一个唯一的 key 属性。

      在 Vue 中,你可以使用 this.$refs.tree 来获取和操作 tree 组件。然后,你可以使用 activeKeys 来动态控制树的折叠和展开。

      例如:

      javascript this.$refs.tree.on('change', function (e) { console.log(e); this.$refs.tree.activeKeys = e.newKeys; });

      在这个示例中,当你点击 tree 组件时,activeKeys 会更新为 e.newKeys,这就是你想要的结果。

    更多回答
    网站公告
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部